How to import a whole different HTML file into an iframe?
Question
I have an HTML doc that I want to be loaded into my iframe and then the print preview to pop up on google chrome. This is what I have done so far but it doesn't seem to work:
<script>
...
jQuery(document).ready(function($) {
$('#printerButton').click(function(){
openPrintDialogue();
});
});
function openPrintDialogue(){
$('<iframe>', {
id: 'frame',
scr: 'path/to/my/external/html/file',
name: 'myiframe',
class: 'printFrame'
})
.appendTo('body');
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
setTimeout(() => { $(".printFrame").remove(); }, 1000);
};
...
</script>
<html>
...
<input type="button" id="printerButton" name="print" value="Print It" />
...
</html>
The iframe pops-up but it is just blank and I want it to be populated/filed with the content in the external html file of mine.
NOTE: The main reason I am doing this is because I want to print the external html file on button click. If you know any way that is easier than what I am doing to do that then please inform me.
Thank you.
UPDATE: Solved. Thanks perfect5th!
1 answers
solution1
0 2017-07-27 16:27:55
As someone already told you - "scr" should be "src", but you have another problem:
setTimeout(() => { $(".printFrame").remove(); }, 1000);
will not be called until the print window will be closed. This is chrome browser limitation..(print window stops the JS to run in the parent window).
And anyway, I would use the id selector rather the class selector to get the iframe.
setTimeout(() => { $("#frame").remove(); }, 1000);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.