HTML5JavaScript-如何捕获尝试从沙盒iframe启动导航？_Javascript_Html_Iframe_Sandbox

HTML5JavaScript-如何捕获尝试从沙盒iframe启动导航？

javascript html iframe

HTML5JavaScript-如何捕获尝试从沙盒iframe启动导航？,javascript,html,iframe,sandbox,Javascript,Html,Iframe,Sandbox,我有一个沙盒iframe，不允许更改位置： <iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts" class="iframe visible" src="thesource.html" width="100%" scrolling="auto" frameborder="0"></iframe> 例如：有额外限制的： <ifram

我有一个沙盒iframe，不允许更改位置：

<iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts" class="iframe visible" src="thesource.html" width="100%" scrolling="auto" frameborder="0"></iframe>

例如：

有额外限制的：

<iframe src="demo_iframe_sandbox.htm" sandbox=""></iframe>

Internet Explorer 10、Firefox、Chrome和Safari都支持沙盒属性

注意：Internet Explorer 9不支持沙盒属性和早期版本，或在歌剧中

定义和用法

如果指定为空字符串（sandbox=“”），则sandbox属性为内联文件中的内容启用一组额外限制框架

沙盒属性的值可以是空字符串（全部）限制条件已应用），或以空格分隔的预定义将删除特定限制的值

HTML4.01和HTML5之间的差异

沙盒属性在HTML5中是新的

语法

<iframe sandbox="value">

属性值

“”=>应用下面的所有限制

allow same origin=>允许将iframe内容视为与包含文档来自同一来源

allow top navigation=>允许iframe内容从包含的文档中导航（加载）内容

允许表单=>允许表单提交

允许脚本=>允许脚本执行

javascript：是一种奇怪的URI协议。它可以在某些上下文中工作，例如，但不是所有上下文中都可以，例如，窗口的位置不能设置为这样的URI。（虽然您可以将javascript:URI分配给window.location作为运行脚本的一种非常迂回的方式，但窗口的位置不会一直设置为该值。）

若要将内容写入IFRAME，请获取对该框架文档的引用并将其写入。这样做将需要设置“允许同源沙箱”标志

<iframe id="myframe" sandbox="allow-scripts allow-same-origin" src="about:blank"></iframe>


var frame=document.getElementById（“myframe”）；
var fdoc=frame.contentDocument；
fdoc.write（“你好世界”）；//或者别的什么

现场示例：

我是新来的，所以我没有足够的声誉来评论答案，如果我做错了，我很抱歉，但不幸的是，接受的解决方案将无法完成您想要的

当DOM准备好后，我就可以通过运行上面JSFIDLE中的脚本来演示我的意思（控制台中不会出现警报，但仍然会出现错误）。这里有一个更详细的关于小提琴目前的情况：

// running with the No wrap - in <head> option
var frame = document.querySelector('iframe'); // null, the iframe isn't there yet
try {
    frame.src="http://wedesignthemes.com/themes/redirect.php?theme=wedding";
} catch(e) {
    // TypeError here, no hints about the iframe :(
    alert('Error!');
}

因此，不幸的是，如果没有第三方内容开发人员的帮助，我无法在当前的浏览器实现中找到任何方法来很好地做到这一点。我在HTML5规范中读到了一些有趣的东西，这些东西可能会让我们在将来做类似的事情（不幸的是，我在这里插入的链接数量太多了），因此，我会密切关注事态的发展。

您现在可以使用

允许通过用户激活进行顶部导航

这是否包括有人单击链接并将其目标设置为

\u parent

或

\u top

的情况？写得很好。这应该是被接受的答案。我已经用大红旗更新了我的答案，所以人们不会使用它。谢谢你抓住这个并指出它！

<script>
    var frame = document.getElementById("myframe");
    var fdoc = frame.contentDocument;

    fdoc.write("Hello world"); // or whatever
</script>

// running with the No wrap - in <head> option
var frame = document.querySelector('iframe'); // null, the iframe isn't there yet
try {
    frame.src="http://wedesignthemes.com/themes/redirect.php?theme=wedding";
} catch(e) {
    // TypeError here, no hints about the iframe :(
    alert('Error!');
}

<iframe id="myframe" sandbox="allow-scripts allow-top-navigation"></iframe>
<script>
  var url = "http://wedesignthemes.com/themes/redirect.php?theme=wedding",
      frame = document.getElementById("myframe"),
      listener;
  listener = window.addEventListener("beforeunload", function(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
      // The iframe tried to bust out!
      window.removeEventListener("beforeunload", listener);
      return "This is unavoidable, you cannot shortcut a " +
             "navigation attempt without prompting the user";
  });
  frame.src = url;
</script>