加载 iframe 而不将其注入到 DOM 中

Question

我基本上有与这个问题相反的问题：如何防止 iframe 在注入 DOM 时加载？ 我希望加载一个未注入 DOM 的

IFRAME

元素。

我正在尝试通过 JavaScript 打印页面。目标是避免导航链接、发出打印命令和返回。

我可以使用 jQuery。

// fake table that illustrates pertanent DOM
<table class=diary><tr><td data-job=12345 contextmenu=job_menu><a href=/jobs/12345>view job 12345</a></table>

// real code
<menu type="context" id="job_menu">
    <menuitem label="Print Job" onclick="PrintJob(); return false;"></menuitem>
</menu>
<script type="text/javascript">
    var target = null;

    function PrintJob()
    {
        var job_no = $(target).data('job');
        if(job_no > 0) {
            $('<iframe name="printjob" src="/jobs/'+job_no+'">').load(function () {
                this.focus();
                this.print();
            })
            .trigger('load');
        }
    }

    $('.diary').bind('contextmenu', function (ev) {
        var td = ev.target;
        while(td && td.nodeName != 'TD')
            td = td.parentNode;
        target = td;
    });
</script>

问题在于，在生成的

.trigger('load')

元素上调用

IFRAME

不会导致对

GET

属性 URL 发出

src

请求。我希望首先调用默认处理程序，然后我附加的处理程序将触发，并打印 iframe 的内容，但我的加载处理程序只是立即被调用。

我无法将打印调用附加到 iframe 的

contentDocument.onready

事件，因为在框架加载之前

contentDocument

为零。我不知道你是否可以聚焦不在 DOM 中的元素，或者这是否是打印所必需的，但我在其他地方看到的代码都有

.focus()

前面的

.print()

（我也尝试过使用

window.frames['printjob'].print()

，但我怀疑如果 iframe 尚未在窗口中，

window.frames['printjob']

为零:)

Answer 1

正如 Tom van der Woerdt 所说，除非将

iframe

添加到 DOM，否则它不会加载。

但这并不意味着它必须是可见的：¹

$(`<iframe name="printjob" src="/jobs/'+job_no+'" style="display: none">`)
    .load(function() {
        this.contentWindow.focus();
        this.contentWindow.print();
    })
    .appendTo(document.body);

注意

display: none

。在我对现代浏览器的实验中（以及指出这一点的 user2027290 的实验），

iframe

被加载，并显示打印对话框。

诀窍是弄清楚何时将其删除。现代浏览器有一个您可以使用的

afterprint

事件。或者您可以在用户下次打印之前将其删除，避免拥有多个。

---

¹ 在这个答案的 2011 版本中，我将其加载为可见但在视口之外，如下所示：

$('<iframe name="printjob" src="/jobs/'+job_no+'" style="position: absolute; left: -10000px; top: 0">')
    .load(function() {
        this.contentWindow.focus();
        this.contentWindow.print();
    })
    .appendTo(document.body);

我不记得我这样做是因为

display: none

当时不起作用，还是因为我只是没有想到它，但如果您遇到

display: none

解决方案的任何问题，那可能是后退尝试。

Answer 2

这不是发明AJAX的原因吗？也许这可能有帮助。

回答你的实际问题：你不能。如果不将

<iframe>

插入 DOM，则不会加载它。