So I think Chrome and Firefox interpretation of DOM is screwing with me. I am trying to print a pdf from a browser (dynamically created) because I can't have the header and footer normally printed with printing an HTML page. Now I was just sending the PDF using fpdf from a php page and use the toolbar or right click and print but now the clients want a button on the page to initiate the print dialog but of course not print anything else but the PDF.... so I embeded it:
<embed
type="application/pdf"
src="print_pdf.php"
id="pdfDocument"
width="100%"
height="100%" />
and a button's onClick called
<script type="text/javascript">
function printDocument(documentId) {
((function(){return document.getElementById(documentId);})()).print();
//Wait until PDF is ready to print
if (typeof document.getElementById(documentId).print == 'undefined') {
setTimeout(function(){printDocument(documentId);}, 1000);
} else {
var x = document.getElementById(documentId);
x.print();
}
}
</script>
where documentID = "pdfDocument"
This worked great in IE9 but chrome and mozilla all say "Uncaught TypeError: Object # has no method 'print'"
so I tried to use thinking embed was causing improper object interpretation in chrome:
<object data="print_pdf.php" type="application/pdf" width="100%" height="100%" id="pdfD2">
alt : test.pdf
and called the same onClick, where documentID = "pdfD2"... "Uncaught TypeError: Object # has no method 'print'"
Then I tried an Iframe:
... "Uncaught TypeError: Object # has no method 'print'"
I'm so frustrated given Chrome is my go to... I even disabled chrome's builtin PDF view and used Adobe 10.xxx.. ARGH!!!
FYI, my simple button tags are:
<input type="button" value="Print Rx" onclick="printDocument('pdfDocument')">
<input type="button" value="Print Rx2" onclick="printDocument('pdfD2')">
<input type="button" value="Print Rx3" onclick="printDocument('pdfD3')">
I think the error is in the line:
((function(){return document.getElementById(documentId);})()).print();
which means that you "pack" (well possibly) uncompleted DOM into the closure.
It goes before the next line which checks for "undefined" print.
Apart from this, why do you use timeout, and not just use onload or DOMReady events?
Related
I have a java ee application where I'm using JSF with Primefaces.
Now I need to open a dialog where PDF document is displayed.It is disabled to print or download the document. So I have hidden the bar.
<p:dialog widgetVar="dlgpdf" height="800" width="950" header="pdf" maximizable="false" minimizable="false" resizable="false" dynamic="true" showEffect="clip">
<p:media value="#{DIPCSS.downloadFiles()}" player="pdf" width="900px" height="600px" id="pdfvisualizer">
<f:param name="idee" value="#{DIViewBean.id}" />
<f:param name="#toolbar" value="0" />
</p:media>
</p:dialog>
Everything is fine here.
But how do I know that the user has scrolled to the end of the document? Then I want to enable the button press.
I've tried a lot of JS code, but none of it works for me. The problem is probably that it's in a dialog and there is a new html structure. Any recommendations?
I try this now:
<script type="text/javascript">
const myDiv = document.getElementById('pdfvisualizer')
myDiv.addEventListener('scroll', () => {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) { console.log('scrolled to bottom')}
})
</script>
And Error is: Uncaught TypeError: Cannot read property 'addEventListener' of null
So I have a iFrame that is linked to a out sourced quote on another website. Is it possible to add a print button for the results inside that iFrame?
I have the following code attempt but it's not doing much at all - When the button is clicked, it does nothing
<iframe src="https://www.compulife.net/website/1295/quoter.html" width="750 pixels" id="test" name="test" height="750 pixels" frameborder="0" formtarget="_blank"></iframe>
<input type="button" value="Print" onclick="test()" />
<script>
function test {
window.frames["test"].focus();
window.frames["test"].print();
}
</script>
Error:
Uncaught TypeError: test is not a function
at HTMLInputElement.onclick
Is there something that I might be doing wrong?
I think there are two mistakes you are doing the typo error for your function instead of
test() you have called just test and secondly
Uncaught TypeError: test is not a function
at HTMLInputElement.onclick
is from the window.frames["test"].print(); instead of this you can use
document.getElementById("test").contentWindow.print();
Even if you managed to clear al this error since you mentioned I have an iFrame that is linked to an outsourced quote on another website won't get the result because
you are going to end up in an error like this
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
This is because You can't access an iframe with different origin using JavaScript, it would be a huge security flaw if you could do it.
see the workaround at:SecurityError: Blocked a frame with origin from accessing a cross-origin frame
This is the code, it seems very simple and it's kind of a prototype of something I want to achieve. I simply want the top 10% or so of my screen to have a button or something along these lines that opens a random link in the iframe that takes up the rest of the screen below. But I'm having trouble getting this to open in the target iframe. So here's the code before I began messing with it too much. I don't know javascript at all, so I'm surprised I got this far at all.
<body>
<script>
<!--
/*
Random link button- By JavaScript Kit (http://javascriptkit.com)
Over 300+ free scripts!
This credit MUST stay intact for use
*/
//specify random links below. You can have as many as you want
var randomlinks=new Array()
randomlinks[0]="http://houvv.deviantart.com/art/Water-Spirit-498202921"
randomlinks[1]="https://www.artstation.com/artwork/b08Jr"
randomlinks[2]="http://leekent.deviantart.com/art/Night-Stalker-505269510"
randomlinks[3]="http://joshtffx.deviantart.com/art/Firekeeper-Dark-Souls-3-609065320"
function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
//-->
</script>
<form method="post">
<center><p><input type="button" name="B1" value="Dreamquest" onclick="randomlink()"></p> </form></center>
<!--Uncomment below to use a regular text link instead
Random Link
-->
<p>
<iframe src="stumble.html" frameborder="0" noresize="noresize" name="iframe" style="position:relative; background:transparent; width:100%;height:100%;top:40px;padding:0;" />
</body>
You could do
var randomlinks = ['http://houvv.deviantart.com/art/Water-Spirit-498202921','https://www.artstation.com/artwork/b08Jr','http://leekent.deviantart.com/art/Night-Stalker-505269510','http://joshtffx.deviantart.com/art/Firekeeper-Dark-Souls-3-609065320'];
instead of creating an array and defining its elements, since you can define things dynamically in JavaScript.
There is also an error here on these lines
<form method="post"><center><p><input type="button" name="B1" >value="Dreamquest" onclick="randomlink()"></p> </form></center>
since you ended your center element after your form element,
<form method="post"><center><p><input type="button" name="B1" >value="Dreamquest" onclick="randomlink()"></p></center> </form>
this would be the correct code.
But anyway, your code seems to work even with the errors so I don't see the problem.
Edited:
I tweaked with your code a little https://jsfiddle.net/xxmq68e9/
function randomlink(){
var iframe = document.getElementById('iframe');
iframe.setAttribute('src','https://www.artstation.com/artwork/b08Jr');
}
seems to work, but it seems the websites have disallowed loading of their webpages in an iframe since I keep getting the error
Refused to display URL in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
How to set 'X-Frame-Options' on iframe?
I am designing a simple Rich Text Editor using HTML/Javascript. It uses iframe. While it is working great in IE6 (and possibly newer IE versions), it is broken in FireFox. The iframe cannot be edited or used in any way.
The HTML <body>
<input type="button" id="bold" class="Button" value="B" onClick="fontEdit('bold');">
<input type="button" id="italic" class="Button" value="I" onClick="fontEdit('italic');">
<input type="button" id="underline" class="Button" value="U" onClick="fontEdit('underline');">
<hr>
<iframe id="TextEditor" class="TextEditor"></iframe>
The Javascript (for IE)
TextEditor.document.designMode="on";
TextEditor.document.open();
TextEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
TextEditor.document.close();
TextEditor.focus();
The above script makes iframe editable in IE. Fails to do so in FF. So I changed a few things for FF version-
The Javascript (for FF)
id("TextEditor").contentWindow.designMode="on";
id("TextEditor").contentWindow.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.close();
id("TextEditor").focus();
This section of code makes FF provoke an pop-up alert with a blank page as a target. It's still broken. What now follows are general functions for things like id() and fontEdit()-
function fontEdit(x,y){
TextEditor.document.execCommand(x,"",y);
TextEditor.focus();
}
function id(id){
return document.getElementById(id);
}
function tag(tag){
return document.getElementsByTagName(tag);
}
I'm sure FF doesn't handle iframe this way. So how do I get iframe to be used as a Rich Text Editor and without showing pop-ups. Please try your best to avoid jQuery since I'm not that good in it yet. Which is why the custom functions like id() and tag() exists.
And, I'm aware that there are other freely available Text Editors for me to download and use so please do not suggest me any such solutions and do not ask me why I must re-invent the wheel. Only answer if you know where I am going wrong and if you can actually help me fix the problem.
FF provoke an pop-up alert with a blank page as a target because you are calling the function window.open, instead you shoud call document.open.
window.open: opens a new browser window.
document.open: It opens an output stream to collect the output from any document.write() or document.writeln() methods. Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
Note: If a document already exists in the target, it will be cleared.
See The open() method
This should works for you:
id("TextEditor").contentWindow.document.designMode="on";
id("TextEditor").contentWindow.document.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.document.close();
I'm in the process of debugging my web application and have hit a wall. I'm experiencing a behavior in Google Chrome only and my javascript ineptitude is keeping me from the solution.
I have an ASP page with an <asp:Panel> control. Within the panel, I've setup a simple search textbox and am using an <asp:LinkButton> to launch the search. The user enters their search text and should be able to hit enter (for usability sake) and the search results will display. This works in IE, but not in FireFox. There is a documented fix which I've applied to my page and have successfully gotten FireFox to function. Golden.
Except, the fix doesn't work in Google Chrome! A bit fishy, I fire up Firebug to debug the code... oh wait... it's a Chrome only issue. OK, fine I can handle debugging javascript without Firebug (sob) - I fire up the Chrome debugger and step through the code. It turns out that the javascript fix, previously mentioned, is being dropped by Chrome.
The fix script runs on page load and modifies the click handler of the LinkButton:
var defaultButton = document.getElementById('<%= lnkSearch.ClientID %>');
if (defaultButton && typeof(defaultButton.click) == 'undefined') {
defaultButton.click = function() {
alert('function fired');
var result = true;
if (defaultButton.click) result = defaultButton.onclick();
if (typeof(result) == 'undefined' || result) {
eval(defaultButton.getAttribute('href'));
}
};
alert(typeof(defaultButton.click) != 'undefined');
}
And when running the page in the chrome debugger I step into function WebForm_FireDefaultButton() and get to the line:
if (defaultButton && typeof(defaultButton.click) != "undefined") { ... }
and for some reason defaultButton.click has become "undefined". I'm stumped... What am I missing?
Also, I'm not using jQuery and it isn't a viable solution.
The HTML produced:
<div id="abc_pnlSearchPanel" language="javascript" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'abc_lnkSearch')">
<div class="searchPanel">
<span class="searchText">
Type in stuff to search:
</span>
<span style="float: left;">
<input name="abc:txtSearch" type="text" id="abc_txtSearch" style="width:312px;" />
</span>
<a onclick="this.blur();" id="abc_lnkSearch" class="ButtonLayout" href="javascript:__doPostBack('abc$lnkSearch','')"><span>Search</span></a>
<div style="clear: both"></div>
</div>
</div>
I wasn't able to determine why this was happening in Chrome and none of the other browsers. But registering the script to execute on PageLoad solved the problem.
<body onLoad="DefaultButtonFix()">