如何将完整的不同HTML文件导入iframe?

时间:2017-07-20 22:39:44

标签: javascript jquery html iframe

我有一个HTML文档,我希望将其加载到我的iframe中,然后在google chrome上弹出打印预览。这是我到目前为止所做的,但它似乎不起作用:

<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>

iframe弹出,但它只是空白,我希望它与我的外部html文件中的内容一起填充/归档。

注意:我这样做的主要原因是因为我想在按钮点击时打印外部html文件。如果您知道任何方式比我正在做的更容易,请通知我。

谢谢。

更新:已解决。谢谢perfect5th!

1 个答案:

答案 0 :(得分:0)

正如有人告诉你的那样 - “scr”应该是“src”,但你还有另外一个问题:

 setTimeout(() => { $(".printFrame").remove(); }, 1000); 
在打印窗口关闭之前,不会调用

。 这是chrome浏览器的限制..(打印窗口阻止JS在父窗口中运行)。

无论如何,我会使用id选择器而不是类选择器来获取iframe。

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