是否可以将 IFrame 浮出浏览器？答案

【问题标题】：Is it possible to float IFrame out of the browser?是否可以将 IFrame 浮出浏览器？
【发布时间】：2011-12-07 12:55:02
【问题描述】：

我想知道是否可以将 IFrame 浮出浏览器？是否可以将 IFrame 拖到浏览器之外？

我的想法是我的 html\js 应用程序就像一个任务栏，我希望 iframe 能够被拖到浏览器之外的其他程序的顶部。

谢谢，多尔。

【问题讨论】：

我很困惑：你想在新的浏览器选项卡中打开 iframe，还是在新的浏览器窗口中打开？

标签： javascript html iframe drag-and-drop draggable

【解决方案1】：

我见过的唯一可以做到这一点的应用程序是AIR。也就是说，如果你知道 URL，你可以做 edge detection 并在新窗口中打开 iframe 内容

jsFiddle 并伴随DEMO - 一如既往，window.open 假设您允许来自站点的弹出窗口

使用 jQuery UI 可拖动：

$("#container").draggable({
  drag: function(event, ui) {
    var offsetXPos = parseInt( ui.offset.left );
    var offsetYPos = parseInt( ui.offset.top );
    $("#coord").text(offsetXPos+'x'+offsetYPos);
    if (offsetXPos===0 || offsetYPos===0) { // be careful with <= since it may trigger many windows
      $("#container").hide();
      window.open('http://msn.com','_blank');
    }
  }
});

<div id="container">
    <div id="handle">Drag me <span id="coord"></span></div>
    <iframe src="http://msn.com/" frameborder=no></iframe>
  </div>
</div>

#container { left:100px; top:100px; width:500px }
#handle { border:1px solid black; height:40px, width:100%; background-color:lightblue; cursor:move; pointer:move}
iframe { width:100%; border:0 }

【讨论】：

谢谢，你能再解释一下吗？也许链接到示例？
再次感谢，您的演示只允许我在浏览器中拖动一个项目，我希望它离开浏览器。这个想法是我的 html\js 应用程序就像一个任务栏，我希望 iframe 能够被拖到浏览器之外的另一个程序的顶部。
JavaScript 或纯客户端编码无法满足新要求 - 您无法抓住拖动的对象。我的演示甚至在我的浏览器中打开了一个新选项卡，而不是一个新窗口，因为这些是我对该浏览器的设置，您无法覆盖。
在 Google Chrome 中，此演示似乎将当前选项卡重定向到 msn.com，而不是在新窗口中打开 iframe。
自我编写代码以来，MSN 已将 framebuster 代码放入其中。我将更改为可框架的网站

【解决方案2】：

不，但您可以添加 javascript 来启动弹出窗口（这会从服务器重新加载 iframe）并从当前文档中删除 iframe。

【讨论】：