即使將其重定向到其他網址，也要繼續將元素寫入iframe

Question

我知道如何寫入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>

DEMO

不過有一個問題。 在文本區域中輸入以下內容：

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

現在，單擊鏈接，然后返回到文本區域以繼續書寫。 由於跨域限制，它不再起作用。 在這種情況下，有什么辦法可以繼續寫？

注意：我發現了三個類似的應用程序，它們似乎按我的意願工作。 我想知道它們的工作方式與我的演示有何不同，我需要在代碼中進行哪些更改：

這是我嘗試過的代碼：

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

Answer 1

有兩種方法可以實現此目的。 或者：

強制所有站點外鏈接在新標簽頁/窗口中打開； 要么
如果無法再將iframe的源設置為本地URL，則將其回收。

最佳解決方案將取決於您的確切要求。

更新：編寫並測試了兩者，我認為選項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寫入嘗試/捕獲的嘗試就可以了。

在這里查看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);
    }
}

如果您可以將“ about：blank”替換為真正的空白本地頁面（例如blank.html），這可能使其與跨瀏覽器的兼容性更高-到目前為止，我僅在Chrome中進行了測試。

即使將其重定向到其他網址，也要繼續將元素寫入iframe

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-17 12:13:18

即使將其重定向到其他網址，也要繼續將元素寫入iframe

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-17 12:13:18

解決方案1
1 已采納 2014-03-17 12:13:18