在 iFrame 中调整 HTML - Javascript 不工作答案

【问题标题】：Adjusting HTML inside iFrame - Javascript Not Working在 iFrame 中调整 HTML - Javascript 不工作
【发布时间】：2016-08-20 19:50:54
【问题描述】：

我已经在 StackOverflow 上查找 javascript/iFrame 帖子大约 45 分钟，并且我收集了一些很棒的资源，但是我无法让 javascript 在 iFrame 中正常运行。我附上了两个来自我自己的 iFramed 网站的屏幕截图。 iFrame 会弹出一个打开的菜单，该菜单占据了框架的 60%。我想在菜单中添加一个类，以便在我的页面加载时自动关闭它。我想我有正确的 JS，但我无法让它发挥作用。该类根本不会添加。

这是我将 div ID 更改为“扩展”类的 iFrame 和 Javascript。我知道这听起来很傻，但扩展的是关闭菜单的类名。任何帮助，将不胜感激！谢谢。

<iframe src="http://dayzdb.com/map#2.065.045" style="width:500px; height:300px;" id="dayzdb"></iframe>

      <script>$("#dayzdb").contents().find("#mapContainer").addClass("expanded")</script>

代替发布 HTML（因为它很长），我发布了网站链接，您可以在其中检查导航栏上的元素以查看它。

http://dayzdb.com/map

【问题讨论】：

我不认为你需要.contents()，如果你马上做.find()，我认为.find()就足够了。另外，您能否发布一些包含在 iFrame 中的 HTML？它可能会帮助我们弄清楚为什么它没有正确选择。
iframe 是否来自同一个域？如果没有，您将受到same origin policy 的约束。
好问题，我也会附上 HTML！我也会尝试删除内容，看看是否可行！
@DavidWashburn 您不能针对iframe 的内容运行脚本，该内容来自与您正在构建的域不同的域（url/网站/网址）。例如，如果您的网站是 www.example.com，那么由于我在上述评论中发布的链接，您将无法做您想做的事情。
@lamelemon，这是一个令人遗憾的消息，但也很有帮助。您是否听说过任何其他合法的方法来做到这一点？如果没有，我仍然非常感谢有用的见解。

标签： javascript jquery html css iframe

【解决方案1】：

您是否在您的页面和 iframe 中使用相同的域？不要忘记cross-domain 政策，否则它不会起作用！如果您可以控制这两个站点，则可以使用 postMessage 方法跨不同域传输数据。一个非常基本的例子：

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');

【讨论】：