javascript - 将脚本和样式应用于 iFrame？

Question

我正在尝试为网站创建一个小型编辑器。其中一项功能是拖放界面。我希望用户能够将元素拖到页面中的另一个位置。我正在考虑拥有一个网站的 iFrame，并应用 JS 和 CSS 来启用拖放功能。

这是执行此操作的 CMS 的屏幕截图：

该网站是一个 iFrame。当我打开 iFrame 时，您无法拖放元素。所以，我假设他们以某种方式在父页面中应用了更改。有什么方法可以基本上将 Javascript 添加到 iFrame 中？

谢谢！

Answer 1

只要iframe引用的页面在同一个域上，是的，你可以。您可以在您的元素上应用脚本和样式，iframe就像您对主父页面中的任何元素所做的那样。主要语法是这样的：

var ifrm = document.getElementById("your_iframe_id");
/*ifrm.contentWindow.document is the document within the iframe
so let's try styling a div with an id 'mydiv' inside the iframe:*/
ifrm.contentWindow.document.getElementById("mydiv").style.color = "red";

当然这只是一个示例，您可以使用相同的机制对其中的元素进行更复杂的处理iframe（包括拖放！）

iframe您也可以执行在父页面中定义的函数。语法相似且直观：

ifrm.contentWindow.yourFunction();

我希望这对你有任何帮助！