如何使用 Jquery 从 iframe 标签的内部元素访问 iframe 标签的外部元素答案

【问题标题】：How to access outer element of iframe tag from inner element of iframe tag using Jquery如何使用 Jquery 从 iframe 标签的内部元素访问 iframe 标签的外部元素
【发布时间】：2014-04-02 08:18:31
【问题描述】：

<div id="fancybox-content" style="height:200px;">
    <iframe id="fancybox-frame">
        <html>
            <head></head>
            <body>
                <div class="inner-div"><p class="click-here">Button</p></div>
            </body>
        </html>
    </iframe>   
</div>

div#fancybox-content 的初始高度为 200px，但点击按钮后，div.inner-div 的高度会增加。所以我也想增加 div#fancybox-content 的高度。

那么我如何使用 Jquery 来实现呢？

【问题讨论】：

标签： jquery html css iframe

【解决方案1】：

IFrame 是否与您的外部页面在同一个域中？如果不是，您必须使用消息发布来执行此操作。

例如在外窗口中：

myIframe.contentWindow.postMessage('hello', '*');

在 iframe 中：

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
}

取自this answer

【讨论】：

两者都在同一个域中。