Can't set data property of an HTML object element with javascript - javascript

The following works in current Firefox (PDF loads), but not in current IE (page is blank). Any suggestions?
<head>
<script type="text/javascript">
function startup() {
var bubba = document.getElementById('bubba');
bubba.data = 'http://server.qa/test.pdf';
}
</script>
</head>
<body onload="startup();">
<object id="bubba" type="application/pdf" width="80%" height="800">
No PDF reader installed
</object>
</body>

You won't be able to display the PDF like that. The syntax for including plugins differs between IE and Forefox.
I would recommend using an <iframe> instead of an <object> and using JavaScript to set the iframe's src attribute. This should invoke whichever PDF plugin is installed in the browser, or download the PDF if none is.

Related

Calling iframe link from other js file not working

I created an iframe in vex6.html and a js file in styles.gq/test.js and in that file there is the link and id but when I try to call the code in html it does not work.
Here is my code for vex6.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript" src="https://styles.gq/test.js" ></script>
<iframe id="vex6" width="100%" height="500" style="border:1px solid black;"></iframe>
</body>
</html>
here is my js code
document.getElementById("vex3").src
= "https://www.obviousplays.tk/gfiles/vex3";
document.getElementById("vex4").src
= "https://www.obviousplays.tk/gfiles/vex4";
document.getElementById("vex5").src
= "https://www.obviousplays.tk/gfiles/vex5";
document.getElementById("vex6").src
= "https://www.obviousplays.tk/Gfiles6/vex6";
document.getElementById("slope").src
= "https://www.obviousplays.tk/gfiles/slope";
I expected an iframe but instead there seems to be no link for the iframe
it is also spitting out the error cannot set properties of null (setting(src))
Add the line
<script type="text/javascript" src="https://styles.gq/test.js</script> after the iframe tag.
Worked for me.
Error in console: "script.js:3 Uncaught TypeError: Cannot set properties of null (setting 'src')"
Your script is loaded before the iframe content, meaning that you're trying to initialize the source of an unidentified object.
Solution: Place the <script> tag below your iframe. It is a good practice to place <script> tags at the bottom of the <body> tag so we can always access loaded content. However, sometimes it takes the contents a little bit more time until they fully load (despite placing the <script> tag at the bottom of the page). I'd suggest wrapping your code in window.onload = () {} It will ensure that all contents are loaded before firing the code.
<body>
<iframe id="vex3" width="100%" height="500" style="border:1px solid black;"></iframe>
<script type="text/javascript" src="https://styles.gq/test.js"></script>
</body>
Your code is fine and should work (pardon for criticizing). Anytime you seem to use repetitive code, it means that it can be simplified/automated like so:
window.onload = () => {
// Target all <iframe> tags.
iframes = document.querySelectorAll('iframe');
// Loop through list of <iframe> nodes.
Array.from(iframes).map(iframe => {
// Update <iframe>'s attribute "src" to the origin URL,
// and use the iframe's attribute "id" value as the final source.
iframe.setAttribute('src', `https://www.obviousplays.tk/gfiles/${iframe.id}`)
});
}

Accessing PDFium plugin methods with JS in Chrome 2019

I would like to access the PDFium API, that is the pdf viewer in Chrome.
It is not clear what can I do.
Some old questions give some hints.
does pdfium expose its api to javascript? i want to get the number of current page, but how to do this?
Call pdfium (chrome native pdf viewer) from javascript
I created a HTML file but I see that the methods of the plugin are not working.
<html>
<body >
<embed id='embedId' width='100%' height='100%' name='plugin' src='C:\path\file.pdf' type='application/pdf' />
<input type="button" value="Click me" onclick="embedEl=getElementById('embedId'); embedEl.selectAll();">
</body>
</html>
I would like to know whether the API is available at present time in Chrome (so to be able to build something upon it) or not.
Hi you can find some API methods here:
https://cs.chromium.org/chromium/src/chrome/browser/resources/pdf/pdf_scripting_api.js
Here is a basic example, it gives out an alert when the PDF loads.
<html>
<body style="overflow:hidden;">
<embed width="100%" height="100%" id="plugin" src="test.pdf" />
<script type="text/javascript" src="pdf_scripting_api.js" />
var plugin = document.getElementById("plugin");
var scriptingAPI = new PDFScriptingAPI(window, plugin);
scriptingAPI.setLoadCallback(function(success)
{
alert(success);
});
</script>
</body>

How do I make html or javascript open and display .swf files from the file system on a button click

I've looked all over the place and here is the fullest extent of what I found:
<!DOCTYPE html>
<html>
<body>
<input name="PickedFile" type="file" accept=".swf">
<object width="550" height="400">
<param name="movie" value="PickedFile">
<script type="text/javascript" src="/path/to/swfobject.js"></script>
<script type="text/javascript">
function loadSWF(url) {
swfobject.embedSWF(url, "flashcontent", "550", "400", "7");
}
</script>
<p><a href="PickedFile" onclick="loadSWF(PickedFile); return false;">
Click here to load the SWF!
</a></p>
<div id="flashcontent"></div>
</object>
</body>
</html>
I'd prefer it to be in html so it can be downloaded for offline use
#AHBagheri, You can display a SWF loaded from outside the server, I just verified using Chrome. I was very surprised it worked.
#Ben, you have multiple flaws in your code. There are a number of reasons why your code wasn't working; the SWFObject tutorial you based your SWF loading code on (from LearnSWFObject) was not written with a file input in mind.
Here is updated code that I verified in Chrome (macOS). Be sure to point the SWFObject <script> to your copy of SWFObject.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Local SWF Test</title>
</head>
<body>
<div>
<input id="PickedFile" type="file" accept="application/x-shockwave-flash"/><br/>
<button id="btn_load">Load the SWF!</button>
</div>
<div id="flashcontent"></div>
<script src="swfobject.js"></script>
<script>
var loadSWF = function (){
var file = document.querySelector("#PickedFile");
if(file && file.files[0]){
swfobject.embedSWF(file.files[0].name, "flashcontent", "550", "400", "7");
} else {
alert("You need to pick a file first.");
}
};
document.querySelector("#btn_load").addEventListener("click", loadSWF);
</script>
</body>
</html>
The primary problems with your code:
You placed everything inside an <object> element. Not only is this incorrect, the <object> element was not needed at all -- this is not how SWFObject works. I removed the <object> and related <param> nodes.
The "accept" attribute for the input needs to specify the MIME type, not the file extension. I changed it to application/x-shockwave-flash.
The "PickedFile" input had a name but no ID. I removed the name attribute and added the ID attribute as this is the common practice when using JavaScript to find an element (in this case document.querySelector). See the examples at https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
When you're using a file input, the value of the input is an array of files, and each item in the array is actually an object containing details about the file, including name and file path. Since you are only expecting one file in the file input, you need to grab the first array item (files.file[0]), which you can then use to access the file's name (files.file[0].name).

Handle user clicks inside an html5 iframe using jQuery

I am trying to present a new feature on a website already in production. Therefore, I am loading this website using an iframe into my development server as follows:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="myframe" src="https://production_website.com" style="border:none;" width="100%" height="600" seamless></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
console.log($("#myframe").contents());
$("#myframe").contents().find(".importantContent").click(function(){
console.log($(this));
});
</script>
</html>
I am trying to intercept user clicks on a specific DOM element in the iframe zone, based on that I'll be injecting a specific HTML content to demonstrate a feature. But listening with jquery click() is not working.
Any suggestions on what to do?
I am aware of the same origin policy restriction, but for a web designer/developer who doesn't have control over the server, aren't there workarounds like disabling the restriction using a pluging?
example: https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
I found this answer in another thread, and it looks like it may work on your end. Try:
$('#myframe').load(function(){
var iframe = $('#myframe').contents();
iframe.find(".importantContent").click(function(){
alert("test");
});
});
Also, you have $("#reco").contents() instead of $("#myframe").contents(), were you meaning to not use the iframe you have in this example?

How to send a pdf file directly to the printer using JavaScript?

How to send a PDF file directly to the printer using JavaScript?
I found two answers in a forum:
<embed src="vehinvc.pdf" id = "Pdf1" name="Pdf1" hidden>
<a onClick="document.getElementById('Pdf1').printWithDialog()" style="cursor:hand;">Print file</a>
and
<OBJECT id = "Pdf2" name="Pdf2" CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" WIDTH="364" HEIGHT="290">
<PARAM NAME='SRC' VALUE="file.pdf">
</OBJECT>
<a onClick="document.Pdf2.printWithDialog()">Print file</a>
But my problem is that it just works on IE, and doesnt work in Firefox or Chrome.
Is there any solution for this?
I think this Library of JavaScript might Help you:
It's called Print.js
First Include
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">
It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf')
What I did was something like this, this will also show "Loading...." if PDF document is too large.
<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
Print PDF with Message
</button>
However keep in mind that:
Firefox currently doesn't allow printing PDF documents using iframes. There is an open bug in Mozilla's website about this. When using Firefox, Print.js will open the PDF file into a new tab.
There are two steps you need to take.
First, you need to put the PDF in an iframe.
<iframe id="pdf" name="pdf" src="document.pdf"></iframe>
To print the iframe you can look at the answers here:
Javascript Print iframe contents only
If you want to print the iframe automatically after the PDF has loaded, you can add an onload handler to the <iframe>:
<iframe onload="isLoaded()" id="pdf" name="pdf" src="document.pdf"></iframe>
the loader can look like this:
function isLoaded()
{
var pdfFrame = window.frames["pdf"];
pdfFrame.focus();
pdfFrame.print();
}
This will display the browser's print dialog, and then print just the PDF document itself. (I personally use the onload handler to enable a "print" button so the user can decide to print the document, or not).
I'm using this code pretty much verbatim in Safari and Chrome, but am yet to try it on IE or Firefox.
This is actually a lot easier using a dataURI, because you can just call print on the returned window object.
// file is a File object, this will also take a blob
const dataUrl = window.URL.createObjectURL(file);
// Open the window
const pdfWindow = window.open(dataUrl);
// Call print on it
pdfWindow.print();
This opens the pdf in a new tab and then pops the print dialog up.
Try this: Have a button/link which opens a webpage (in a new window) with just the pdf file embedded in it, and print the webpage.
In head of the main page:
<script type="text/javascript">
function printpdf()
{
myWindow=window.open("pdfwebpage.html");
myWindow.close; //optional, to close the new window as soon as it opens
//this ensures user doesn't have to close the pop-up manually
}
</script>
And in body of the main page:
Click to Print the PDF
Inside pdfwebpage.html:
<html>
<head>
</head>
<body onload="window.print()">
<embed src="pdfhere.pdf"/>
</body>
</html>
a function to house the print trigger...
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
an button to give the user access...
(an onClick on an a or button or input or whatever you wish)
<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />
an iframe pointing to your PDF...
<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>
More : http://www.fpdf.org/en/script/script36.php
<?php
$browser_ver = get_browser(null,true);
//echo $browser_ver['browser'];
if($browser_ver['browser'] == 'IE') {
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf print test</title>
<style>
html { height:100%; }
</style>
<script>
function printIt(id) {
var pdf = document.getElementById("samplePDF");
pdf.click();
pdf.setActive();
pdf.focus();
pdf.print();
}
</script>
</head>
<body style="margin:0; height:100%;">
<embed id="samplePDF" type="application/pdf" src="/pdfs/2010/dash_fdm350.pdf" width="100%" height="100%" />
<button onClick="printIt('samplePDF')">Print</button>
</body>
</html>
<?php
} else {
?>
<HTML>
<script Language="javascript">
function printfile(id) {
window.frames[id].focus();
window.frames[id].print();
}
</script>
<BODY marginheight="0" marginwidth="0">
<iframe src="/pdfs/2010/dash_fdm350.pdf" id="objAdobePrint" name="objAdobePrint" height="95%" width="100%" frameborder=0></iframe><br>
<input type="button" value="Print" onclick="javascript:printfile('objAdobePrint');">
</BODY>
</HTML>
<?php
}
?>

Categories

Resources