HTML5调整嵌套iframe中顶级文档iframe的大小 [英] HTML5 Resize top-level document iframe from inside a nested iframe

问题描述

假设我有以下index.html body：

Say I have the following index.html body:

<iframe name="parent"></iframe>

在父以下网页正文：

<iframe name="nested-navigation"></iframe>
<iframe name="nested-parent"></iframe>

和嵌套父 iframe加载另一页。在这个其他页面中，我需要以某种方式获得顶级（index.html）文档 parent iframe，以便我可以使用 nested-parent iframe内容大小。

And inside nested-parent iframe, I load another page. Inside this other page, I need to somehow get to the top-level (index.html) documents parent iframe, so that I can resize the height of its contents using the nested-parent iframe content size.

我正在使用嵌套页面正文的内容正确调整index.html的 parent iframes高度。但是，在下一个嵌套中，我无法访问 index.html 文档上下文，因此无法获取父 iframe元素。

I correctly resize the index.html's parent iframes height using the loaded contents of the nested pages body. However, in the next nesting, I am unable to reach the index.html document context, and thus am unable to get the parent iframe element.

我需要帮助找到如何到达index.html的 parent iframe。

I need help on figuring out how to reach the index.html's parent iframe. How would I do this?

页面在线，效果可以在这里查看：

The page is online and the effects can be viewed here:

ngeneersinc.com

www.ngeneersinc.com

如果您点击 Projects 导航链接，它将正确加载页面并调整 parent iframe。遗憾的是，当您点击此嵌套页面中的 Ngen 导航链接时，顶层（index.html）iframe（ parent

If you click the Projects navigation link, it will correctly load the page and resize the parent iframe. Sadly, when you click on the Ngen navigation link inside this nested page, the top-level (index.html) iframe (parent) does not get resized and the content is cut to whatever the height was set to in the previous page.

编辑：

基本上，我试图在我的javascript函数中执行以下操作：

Essentially, I am trying to do the following in my javascript function:

var e = document.getElementById("nested-parent").contentWindow; // which is OK
var x = e.contentWindow; // which is 'undefined' because I lost the context of the index.html document

推荐答案

您可以使用以下jQuery插件来完成此操作：

http://benalman.com/projects/jquery-postmessage-plugin/

You can use the following jQuery plugin to accomplish this:
http://benalman.com/projects/jquery-postmessage-plugin/

然后将以下代码添加到javascript文件，您在iframe文档和中包含父窗口：

Then add the following code to a javascript file that you include inside the iframe document and the parent window:

var iFrames = [];
var iFrameCounter = 0;

// Get the parent page URL as it was passed in, for browsers that don't support
// window.postMessage
var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, ''));

// The first param is serialized using $.param (if not a string) and passed to the
// parent window. If window.postMessage exists, the param is passed using that,
// otherwise it is passed in the location hash (that's why parent_url is required).
// The second param is the targetOrigin.
function SetHeight() {
    var id = Number(parent_url.replace(/.*#(\d+)(?:&|$)/, '$1'));
    $.postMessage({ if_height: $(document).outerHeight(true), id: id }, parent_url, parent);
};

// Adds the iframe for the given url to the given container
function CreateFrame(container, url) {
    $(function () {
        // Pass the parent page URL into the Iframe in a meaningful way
        var src = url + '#' + encodeURIComponent(document.location.href + "#" + iFrameCounter);

        // Append the iFrame into the DOM.
        var html = '<iframe id="iFrame' + iFrameCounter + '" src="' + src + '" width="100%" scrolling="no" frameborder="0">Your browser lacks support for iFrames!<\/iframe>';
        iFrames[iFrameCounter] = { id: "iFrame" + iFrameCounter, container: container, if_height: 0 };

        // Add iFrame to DOM
        $(container).append($(html));
        iFrameCounter++;
    });
}

$(function () {
    // Setup a callback to handle the dispatched MessageEvent event. In cases where
    // window.postMessage is supported, the passed event will have .data, .origin and
    // .source properties. Otherwise, this will only have the .data property.
    $.receiveMessage(function (e) {

        // Get frameId
        var id = Number(e.data.replace(/.*id=([\d-]*).*/, '$1'));

        var frame = iFrames[id];

        // Get the height from the passsed data.
        var h = Number(e.data.replace(/.*if_height=([\d-]*).*/, '$1'));

        if (!isNaN(h) && h > 0 && h !== frame.if_height) {
            // Height has changed, update the iframe.
            $("#" + frame.id).css("height", (frame.if_height = h));
            $("#" + frame.id).css("min-height", (frame.if_height = h));
            $("#" + frame.id).css("max-height", (frame.if_height = h));

            // Also update the parent element of the iframe.
            $("#" + frame.id).parent().css("height", (frame.if_height = h));
            $("#" + frame.id).parent().css("min-height", (frame.if_height = h));
            $("#" + frame.id).parent().css("max-height", (frame.if_height = h));
        }
    });
});

然后使用以下代码在父窗口中创建iframe：

Then use the following code to create the iframe in the parent window:

<script type="text/javascript">
     $(document).ready(function () {
         CreateFrame("#someiFrameContainer", url);
     });
</script>
<div id="someiFrameContainer"></div>

然后每次iFrame中文档的高度改变时，从iFrame页面调用此函数：

Then everytime the height of the document inside the iFrame changes call this function from the iFrame page:

SetHeight();

这将导致iframe页面向其父窗口发送一个包含其新高度的消息跨域），它将捕获消息并更新iframe的大小。这需要父窗口还包括上面的脚本文件，因为这个文件注册事件和函数来处理这些消息时自动使用 CreateFrame（）;

This will cause the iframe page to send a message containing its new total height to its parent window (supports cross-domain), which will catch the message and update the size of the iframe. This requires that the parent window also includes the script file from above, as this file registers the events and functions to handle these messages automatically when using CreateFrame();

这篇关于HTML5调整嵌套iframe中顶级文档iframe的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！