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

【问题标题】：JavaScript - Dynamically resizing iframe cross-domain using URL fragmentJavaScript - 使用 URL 片段动态调整 iframe 跨域大小
【发布时间】：2011-08-07 14:29:50
【问题描述】：

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

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

我可以控制父页面和子页面，但它们将被加载到不同的域（事实上，一个是 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 页面只是一个虚拟页面，即：

为父页面上的元素提供一个 ID
在执行调整大小轮询的父页面上创建一个新的
window.location = "http://my-real-app-location.com"

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

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

【问题讨论】：

你打算在父窗口上运行这个 JS 吗？还是在实际的 iframe 中？
那个JavaScript是在父页面的范围内运行的吧？
嗯，目标是在 iframe 中运行 JavaScript 的 sn-p，以便在父页面上我可以动态创建一个引用的函数（使用 parent.document.write 或类似的东西） window.frames["myframe"]

标签： javascript jquery iframe

【解决方案1】：

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

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

【讨论】：

我更新了问题并进行了澄清；我想这会回答你的问题。

【解决方案2】：

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

如果你需要一个id属性，你必须从父文档中设置它，没有办法绕过它。

【讨论】：

【解决方案3】：

嗯，以下是我最初寻找的代码。这将为元素提供一个 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 属性。

【讨论】：

【解决方案4】：

如果您正在寻找一个不错的跨域解决方案，就在这里 - 一个完整的研究帖子

Yet Another cross-domain iframe resize Q&A

【讨论】：