首页 文章

HTML5从嵌套iframe内部调整顶级文档iframe

提问于
浏览 次
1

这个问题似乎很难理解，所以我会尽力说明 .

假设我有以下index.html主体：

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

在 parent iframe中，我加载了以下页面正文：

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

在 nested-parent iframe中，我加载了另一个页面 . 在这个其他页面中，我需要以某种方式访问顶级（index.html）文档 parent iframe，以便我可以使用 nested-parent iframe内容大小调整其内容的高度 .

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

我需要帮助找出如何到达index.html的 parent iframe . 我该怎么做？

页面在线，可以在此处查看效果：

www.ngeneersinc.com

如果单击 Projects 导航链接，它将正确加载页面并调整 parent iframe的大小 . 遗憾的是，当您单击此嵌套页面中的 Ngen 导航链接时，顶级（index.html）iframe（ parent ）不会调整大小，并且内容将被切割为上一页中设置的高度 .

编辑：

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

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
javascript html css iframe resize

1 回答

  • 1

    您可以使用以下jQuery插件来完成此任务：
    http://benalman.com/projects/jquery-postmessage-plugin/

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

    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：

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

    然后，每次iFrame内部文档的高度更改时，都会从iFrame页面调用此函数：

    SetHeight();

    这将导致iframe页面将包含其新总高度的消息发送到其父窗口（支持跨域），这将捕获消息并更新iframe的大小 . 这要求父窗口还包括上面的脚本文件，因为此文件注册事件和函数以在使用 CreateFrame(); 时自动处理这些消息

    回复于

相关问题