JavaScript-使用URL片段动态调整iframe跨域的大小

Question

我发现了一种记录与iframe进行跨域通信的技术 ，因此我决定尝试利用这一技术来实现宏伟的目标，即在内容更改时自动调整iframe的大小。

基本上，这是我的计划（我知道这有点hacky）。

• 我可以控制父页面和子页面，但是它们将被加载到不同的域中（实际上，一个将是http，另一个将是https）。

• 在iframe中，我有一个函数，该函数将在文档加载时运行，然后定期运行，以获取文档的高度，并将其设置为URL片段的值（即类似https：// blahblah的值）。 com /＃h-768 ）

• 在父窗口中，我有一个函数，该函数将定期检查iframe的网址，获取哈希标签，解析高度，并相应地更改iframe的高度。

最大的收获是： iframe没有与之关联的ID或名称，我可能无法更改。

实际上，iframe 最初将位于同一域中。 它将使用document.write在父窗口中创建iframe-polling函数（因为我之前说过我对父页面有控制权时实际上在撒谎），然后它将导航到我实际所在的页面有兴趣。

因此，真正的问题是， iframe如何为自己赋予名称或ID ？

我一直在尝试这样的事情（使用jQuery）：

$(document).ready(function() {
        // Try changing the name            
        $(self).attr("name", "myframe");
        $(self).attr("id", "myframe");      
});

麻烦的是，它似乎没有用。

有什么想法吗？

澄清说明

父页面将类似于http://mysite.com ，而iframe 最初将是http://mysite.com/iframe 。

该初始iframe页面只是一个虚拟页面，即：

• 为父页面上的<iframe>元素提供ID
• 在父页面上创建一个新的<script>元素，以进行大小调整轮询，然后
• window.location = "http://my-real-app-location.com"

新页面将使用当前高度更新URL片段，从而使iframe的URL类似于http://my-real-app-location.com/#h-800 （表示文档高800像素）。

虚拟页面在父页面上创建的脚本需要获取该URL片段并相应地更改iframe高度。

Answer 1

好吧，父页面最终将控制iframe的URL。 iframe只能更新其网址，而不能更新其他任何内容。

话虽如此，我不确定我是否理解问题。 创建iframe时为什么不给它一个ID？

Answer 2

iframe的窗口/文档无法在其自己的容器标签上设置属性，因为该标签归父文档所有。 标签本身与里面的窗口和文档无关。

如果需要id属性，则必须从父文档中进行设置，并且无法解决。

Answer 3

好吧，以下是我最初寻找的代码。 这将为<iframe>元素提供ID属性，并且此代码在iframe的范围内运行。 当然，仅当iframe与父页面位于同一域（在我的情况下，它最初位于）上时，它才起作用。

var foundMyself = false;
$("iframe", parent.document).each(function() {
    if (this.contentWindow == self) {
        $(this).attr("id", "myframe");  
            foundMyself = true; 
    }
});

以下是我用于在父页面上创建适当的脚本标记的代码（请记住，我的应用程序设置了一个片段＃h-xxxxx来表示页面的高度）：

if (foundMyself) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function resizeApp() { var app = document.getElementById(\"myframe\"); var hash = app.contentWindow.location.hash; app.style.height = hash.substring(3); } setInterval('resizeApp();', 500);";

    parent.document.body.appendChild(script);
}

window.location = "https://my-app-real-location.com"

我现在遇到的新问题是，一旦iframe移开，就不允许我访问contentWindow属性。

Answer 4

如果您要寻找的话，一个不错的跨域解决方案就在这里-一篇完整的研究文章

另一个跨域iframe调整大小问答