简体   繁体   English

如何将整个HTML文件导入iframe?

[英]How to import a whole different HTML file into an iframe?

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. 我有一个HTML文档,我想将其加载到iframe中,然后将打印预览弹出到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. iframe会弹出,但它是空白的,我希望将其与我的外部html文件中的内容一起填充/归档。

NOTE: The main reason I am doing this is because I want to print the external html file on button click. 注意:我这样做的主要原因是因为我要在按钮单击时打印外部html文件。 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! 谢谢perfect5th!

As someone already told you - "scr" should be "src", but you have another problem: 正如有人已经告诉您的那样-“ scr”应该是“ src”,但是您还有另一个问题:

 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). 这是Chrome浏览器的限制。.(打印窗口将JS停止在父窗口中运行)。

And anyway, I would use the id selector rather the class selector to get the iframe. 而且无论如何,我会使用id选择器而不是类选择器来获取iframe。

 setTimeout(() => { $("#frame").remove(); }, 1000); 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM