如何在不重新加载iframe的情况下更改其src？

Question

我有两个框架，使用JavaScript将第一个框架（myframe）的内容复制到第二个框架（myframe2），并设置myframe2的src：

<iframe id="myframe" src="../Page1.aspx" width="100%" height="100px"></iframe>
<iframe id="myframe2"  width="100%" height="100px"></iframe>

<button onclick="myFunction();return false;">Try it</button>

<script>
    function myFunction() {
        var iframe1 = document.getElementById("myframe");
        var iframe2 = document.getElementById("myframe2");

        iframe2.contentWindow.document.body.parentElement.innerHTML = iframe1.contentWindow.document.body.parentElement.innerHTML;
        iframe2.setAttribute("src", iframe1.src);
    }
</script>

FrameSecond 在“src”属性设置后重新加载，但我不需要它这样做。有人可以帮我解决吗？

- Aliasghar Bahrami

---

是的，我从另一个框架复制了内容。 - Aliasghar Bahrami

更改HTML而不更改SRC - freedomn-m

能否在无需重新加载 iframe 的情况下更改它的 src 呢？ - Aliasghar Bahrami

如果不是为了重新加载，改变“src”的意义何在？iframe的URL不会显示在浏览器的地址栏中，那么改变“src”如何帮助您呢？ - nnnnnn

@nnnnnn 你可能有一个动态加载来自其他地方内容的 iframe，但并非所有部分都从该源加载。例如，iframe 可能包含一个从不同 url 加载的表单，则应确保 iframe 的 url 与表单的提交 url 相同，以便在提交表单时它到达正确的位置。另外，如果要在 frame 加载时创建某些动画，则可以使用 ajax 实现。但是，如果刷新表单，则会失去该效果。 - smac89

Answer 1

使用replaceState(state, title, URL)：

iframe2.contentWindow.history.replaceState('WhatEverNameYouWant', "", iframe1.src);

- smac89

---

如果 iframe 的 URL 是 about:blank 呢？在这种情况下，这个解决方案就不起作用了。 - Zach Saucier

这在跨域情况下不起作用。 - Suncat2000

Answer 2

我也遇到了类似的问题。我需要“知道”加载到我的Iframe中的文档位置，以便在其他地方显示其位置。我有一些输入，通过设置来改变iframe的位置。

myIFrame.src =  ... 

这个方法看起来很好，但是当我点击回退或前进按钮时，IFrame的内容会改变，但是似乎不会更改引用IFrame元素的src属性的值。当我在iframe文档中添加链接以在它们之间导航时，出现了同样的问题。

我的解决方案是在加载到IFrame中的文档的onload处理程序中将加载的URL记录到父窗口的字段中。当包含文档需要知道IFrame中加载了什么时，它会查询该变量而不是依赖于其IFrame元素的.src属性，后者似乎无法自动更新与iframe的实际内容。

顺便说一句，我还尝试了从iframed文档的onload处理程序显式设置iframe元素的src属性的值。这确实有效，但会导致iframe内容明显地再次加载。通过使用单独的显式位置存储加载到iframe中的文档的URL，它不会被加载两次，一切都运行得很顺利。

- Panu Logic

Answer 3

虽然这并不是特别针对这个问题的答案，但或许对某些人有用。

我需要将语言传递给Iframe，对我有效的方法是将参数添加到哈希中而不是查询字符串中。因为哈希变化不会触发Iframe中的页面重新加载：

例如 'http://...?uiCulture=en' --> 'http://...#uiCulture=en'

- Alexander Cosman