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
Related
I can't manage to link my Javascript function to my 'onclick' html attribute in the span tag.
I keep getting the error:
"Uncaught ReferenceError: closeAndRefresh is not defined" "at
HTMLSpanElement.onclick"
My code looks like this:
<div class="error">
<div id="errorMessage">
<span onclick="closeAndRefresh();">✖</span>
<p id="message">
<?php echo $confirmationMessage ?>
</p>
</div>
</div>
<script>
function closeAndRefresh() {
<?php $visibility = 'hidden' ?>
window.location.reload(true);
}
</script>
I'll also add a screenshot of my code:
Your script is after your HTML. Include it before html so that your function is defined
function closeAndRefresh(){
window.location.reload(true);
}
<span onclick="closeAndRefresh();">✖</span>
Try writing the script function closeAndRefresh() in the head tag of your html page.
Maybe the html page is not able to load the script when you write it inside the body.
If you have recently added the function to your javascript code, consider clearing the browser's cache, in order to force it reload the javascript code. To check if this is the problem, on your browser show the source html code, find the line where the javascript code is included, and click on it; it will show you the javascript source code the browser is currently using, that may be out of date. Also, as mentioned by others, make sure you include the javascript code before you reference it.
Make sure you reference the function correctly and also try putting the script above or below as it seems to be function not recognized.
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?
In my html page(file:///C:/Users/NEC/Desktop/test.html) has the javascript variable(or input text field) and iframe that call to other host(localhost:8081/TProject/sample.html).
In test.html
<iframe src="localhost:8081/TProject/sample.html" ></iframe><br/>
<input type="text" id="output" ><br />
And, in my sample.html shown in iframe has follow javascript code to change the value of input text of parent window.
function setData() {
window.parent.getElementById("output").value = "hello";
}
Error message is:
Uncaught SecurityError: Blocked a frame with origin "localhost:8081" from
accessing a frame with origin "null". The frame requesting access has a protocol of
"http", the frame being accessed has a protocol of "file". Protocols must match.
How can I pass the value (javascript variable) to offline html page from online server?
Thank you for your answers.
Now I can solve my problem by using "window.parent.postMessage()".
from local host server page of iframe use following to send message
window.parent.postMessage({ message: 'successfully connected'}, "*");
and from offline page catch that message with
window.addEventListener('message', function(event) {
document.getElementById("output").value = event.data.message;
}, false);
<iframe src="http:80//TProject/sample.html" ></iframe>
<iframe src="your_path_in_your_hard_drive/TProject/sample.html" ></iframe>
I think you cannot use localhost in the src attribute, try any one of the above link in src attribute.
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?
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();