Question

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

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

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

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

Answer 1

你不能在不重新加载的情况下在不同窗口之间移动iframe，因为规范说必须重新评估属性：

当iframe元素插入到具有浏览上下文的文档中时，用户代理必须创建嵌套的浏览上下文，然后处理“第一次”的iframe属性。

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

^{（通过https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97）}

旧答案：

// edit：无法按预期工作，因为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/

javascript：IFrame-SRC作为新窗口？

1 个答案: