即使在iframe重定向到不同的url之后，也要继续将元素写入iframe

Keep writing elements into an iframe even after its redirection to different URLs

本文关键字：iframe 继续 元素 之后 url 重定向      更新时间：2023-09-26

我知道如何写入iframe:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Writer</title>
    <style>
        textarea,
        iframe {
            display: block;
            width: 800px;
            height: 200px;
        }
    </style>
</head>
<body>
    <textarea id="ta" oninput="writeIt();"></textarea>
    <iframe id="frm"></iframe>
    <script>
        function writeIt() {
            var ta = document.getElementById('ta');
            var frm = document.getElementById('frm');
            var frmDoc = frm.contentDocument;
            frmDoc.open();
            frmDoc.write(ta.value);
            frmDoc.close();
        }
    </script>
</body>
</html>

但是有一个问题。在文本区输入以下内容:

<a href="http://www.example.com/">Example.com</a>

现在点击链接，然后回到文本区域继续写作。由于交叉原点限制，它不再工作了。在这种情况下还有办法继续写作吗?

注意:我发现了三个类似的应用程序，它们的功能似乎如我所愿。我想知道他们的工作方式与我的演示有什么不同，我需要在我的代码中做什么改变:

  • https://thimble.webmaker.org/
  • http://codepen.io/pen/
  • http://cssdeck.com/labs

下面是我尝试的代码:

<a href="https://googledrive.com/host/0B1iqp0kGPjWsVms5S3JzaUZJYVk/page-template.html" target="_self">Page Template</a>

有几种方法可以实现这一点。:

  1. 强制所有非站点链接在新选项卡/窗口中打开;或
    2. 如果iframe不能再被写入，通过将其源设置为本地URL来回收iframe。

最好的解决方案取决于你的具体需求。

更新:在编写和测试了这两个选项之后，我认为选项2是最好的，除非你有非常具体的需求，使选项1更好。

选项1

首先采用"目标新窗口"解决方案，简单地将所有链接与当前域名进行比较，如果它们不在站点上，则自动将链接目标设置为空白窗口。

参见此处的jsfiddle演示

Javascript: 

function setTargets() {
    var links = document.getElementById("frm").contentWindow.document.getElementsByTagName("a");
    var currentDomain = "http://" + document.location.hostname;
    for (var i = 0; i < links.length; i++) {
        if (links[i].href.indexOf(currentDomain) == -1) {
            links[i].target = "_blank";
        }
    }
}
HTML: 

<textarea id="ta" onkeyup="writeIt();" onblur="setTargets();">Type here</textarea>

选项2

采用"回收iframe"方法(更好!)，您只需将写入iframe的尝试包装到try/catch中。

参见此处的jsfiddle演示

Javascript: 

function writeIt() {
    var ta = document.getElementById('ta');
    var frm = document.getElementById('frm');
    try {
        var frmDoc = frm.contentDocument;
        frmDoc.open();
        frmDoc.write(ta.value);
        frmDoc.close();
    } 
    catch(err) {
        frm.src = "about:blank";
        setTimeout(writeIt,500);
    }
}

如果你可以用一个真正的空白本地页面(例如blank.html)替换'about:blank'，这可能会使它更跨浏览器兼容-到目前为止，我只在Chrome中测试过。

相关文章：