我知道如何写入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>
有几种方法可以实现这一点。:
- 强制所有非站点链接在新选项卡/窗口中打开;或 如果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中测试过。