将脚本和样式应用于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();

我希望以任何方式帮助你！