chrome中的iframe内容高度为null答案

【问题标题】：iframe content height null in chromechrome中的iframe内容高度为null
【发布时间】：2013-09-26 00:54:09
【问题描述】：

我正在使用 jQuery 根据其内容动态更改 iframe 的大小，因此它不会显示滚动条。该脚本非常简单，在 IE9 中运行良好，但在 chrome 中没有任何反应，我添加了一个小“警报”，仅用于调试，我发现 var“cont_height”未在 chrome 中定义。

所有文件都在我的电脑里，包括在 iframe 中加载的页面，所以应该没有跨域问题。

chrome 中的调试工具给了我这个错误：“阻止源为“null”的帧访问源为“null”的帧。协议、域和端口必须匹配。

这里是代码

<script type="text/javascript" src="../js/jquery-1.10.2.min.js"> </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mainframe').load(function () {
                    var cont_height = $(this).contents().height();
                    alert(cont_height);
                    $(this).height(cont_height);
                });
            });
        </script>

我尝试使用“$(window).load”而不是文档就绪，但我认为这不是时间问题，由于权限或其他原因，我无法访问数据。我真的很感激你能给我的任何提示。解决方案也可以在 javascript 中使用。

【问题讨论】：

Chrome 在您没有网络服务器的情况下直接运行文件存在问题。不喜欢域是null（因为没有域）。
我明白了，我可以设置一个假域名或其他什么吗？因为我将使用本地文件进行评估。
@FritsvanCampen 的意思是，如果您在文件系统上使用 (file:///C/myFile.html) 浏览 html，它的来源为空，这会导致问题。您可以在本地 Web 服务器上运行它们，然后将其整理出来 (http://localhost/myFile.html)。如果您想要一个简单的 Web 服务器使用并且没有 IIS、Apache 或其他运行的东西，您可以安装 python 并在您的 html 文件所在的路径中运行 python -m SimpleHTTPServer 从您的机器上的命令行。它是一个非常轻量级的本地 Web 服务器。
我明白了，我会检查 python 网络服务器，这似乎是我正在寻找的轻量级选择。我还有一个问题悬而未决；这是针对大学项目的，我仍然不确定教授将如何测试页面，很可能他会直接从计算机上运行索引。那么，有什么办法，我的框架页面可以向我的主页发送一条消息说“嘿，这是我的身高”？，这真的会覆盖我所有的基础。感谢您的时间和奉献精神。

标签： javascript jquery html iframe

【解决方案1】：

这是我发现的根据内容调整 iframe 大小的最佳方式。

<script>
    function resizeMe(id) {

        var theFrame = document.getElementById(id);




        var theBody = (theFrame.contentWindow.document.body || theFrame.contentDocument.body)
        var newHeight = Math.max(theBody.scrollHeight, theBody.offsetHeight, theBody.clientHeight);

        theFrame.height = (newHeight + "px");

    }
</script>


<iframe id="helloworld" ... onload="resizeMe('helloworld')"></iframe>

您可以使用 parent.resizeMe('helloworld') 让 iframe 文档调用父文档。

<body onload="parent.resizeMe('helloworld')">
...
</body>

或者因为你有 jquery...

<body>
    ...
    ...
    <script>

        $(document).ready(function(){
            parent.resizeMe('helloworld');
        });
    </script>

</body>

【讨论】：

这是一种调整高度的好方法和安全方法，我很欣赏它，但问题是它不允许我访问 iframe 的 contentWindow 或 contentDocument。也许有一种方法可以让 iframe 向我的主页发送它自己的身高？
iframe 是否与您的父窗口进入同一个域？还是从其他域获取内容？
iframe 内容将是我的，在主页所在的同一文件夹中。我需要消息通信，因为该页面将在本地进行测试，在计算机上脱机。
我相信 chrome 不会允许 iframe 和父级之间的通信，除非您访问的是实际域名 (www.somedomain.com)。如果您点击 localhost:8000 或 127.0.0.1:8000，由于安全问题，它将无法正常工作。因此，如果我对您的理解正确，这听起来像是问题。您也许可以为此向您的主机文件添加一个条目。添加：127.0.0.1 localwebsite.com.
@teewuane，我将contentWindow 设为空。我必须更新 iframe height onResize。