javascript:IFrame-SRC 作为新窗口？

Question

我有一个 Web 应用程序，其中有一堆来自其他工具的 iFrame。现在用户应该可以在新窗口/新选项卡中打开 iframe 内容，通常我只需添加如下内容:

function onButtonClick() { var src =    $('#iframe').prop('src');
windows.open(src, "_blank"); }

但他只会打开我的 iFrame 上下文的新版本，例如如果用户在 iframe 中打开页面或单击某些内容并且 javascript 更改了我的 iframe 中的某些内容，则用户将丢失此值..

那么，我可以将 iframe 内容制作为新窗口内容，而不丢失 iframe 中网站的动态状态吗？

Answer 1

您无法在不重新加载的情况下在不同窗口之间移动 iframe，因为规范规定必须重新评估属性:

When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".

-- https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element

^{(via https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97)}

<小时/>

旧答案:

//编辑:无法按预期工作，因为 iframe 在移动时重新加载并且原始 src 已恢复。

如果将 iframe 移出当前页面就很容易了:

<button id="example-button">open in new window</button>

<div id="example-container">
    <iframe id="example-iframe" src="https://example.com/">
    </iframe>
</div>

document.getElementById('example-button').addEventListener('click', function (ev) {
    ev.preventDefault();

    var win = open('about:blank');
    var iframe = document.getElementById('example-iframe');

    // the popup might not be immediately available:
    setTimeout(function () {
        var body = win.document.body;

        body.style.padding = 0;
        body.style.margin = 0;
        body.appendChild(iframe);

        iframe.style.position = 'fixed';
        iframe.style.padding = 0;
        iframe.style.margin = 0;
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 0;
    }, 0);

    // move the iframe back if the popup in closed
    win.addEventListener('beforeunload', function () {
        document.getElementById('example-container').appendChild(iframe);

        iframe.style.position = '';
        iframe.style.padding = '';
        iframe.style.margin = '';
        iframe.style.width = '';
        iframe.style.height = '';
        iframe.style.border = '';
    });
});

示例:http://jsfiddle.net/cpy2jykv/1/