Question

我找到了technique that documents cross-domain communication with iframes，我决定利用它来实现在内容发生变化时自动调整iframe大小的崇高目标。

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

我可以控制父页面和子页面，但是它们将被加载到不同的域上（实际上，一个将是http，另一个是https）。
在iframe中，我有一个函数，它将在文档加载时运行，然后定期运行，以获取文档的高度，并将其设置为URL片段的值（即，类似于https://blahblah.com/#h-768）
在父窗口中，我有一个函数，它会定期检查iframe的URL，获取哈希标记，解析高度，并相应地更改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页面只是一个虚拟页面，即：

提供＆lt; iframe＆gt;父页面上的元素ID
创建一个新的＆lt;脚本＆gt;执行调整大小轮询的父页面上的元素，然后是
window.location = "http://my-real-app-location.com"

新页面将使用当前高度更新网址片段，使iframe的网址类似于http://my-real-app-location.com/#h-800（意味着文档高度为800像素）。

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

Answer 1

那么，父页面最终将控制iframe的URL。 iframe除了其URL之外无法更新任何内容。

话虽如此，我不确定我是否理解这个问题。为什么不能在创建iframe时为iframe提供ID？

Answer 2

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

如果您需要id属性，则必须从父文档中设置它，并且无法绕过它。

Answer 3

嗯，以下是我最初寻找的代码。这将给出＆lt; iframe＆gt; element一个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

如果您正在寻找一个很好的跨域解决方案 - 这是一个完整的研究职位

Yet Another cross-domain iframe resize Q&A

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

4 个答案: