Question

我的页面上有<iframe>控件，我想通过点击超链接更改目标网址（iframe中显示的网页的网址）。问题是iframe没有更新点击。我很确定我错过了什么，但我不知道是什么：

<script type="text/javascript">
var source = document.getElementById("CurrentlySelected")
function change(u) {
    if (source.getAttribute("src") != u) {
        source.setAttribute("src", u);
        document.location.reload(true);
    }
}
</script>

<ul>
    <li><a href="#" onclick="change('http://www.somewebsite.com');">Website 1</a></li>
    <li><a href="#" onclick="change('http://www.thiswebsite.net');">Website 2</a></li>
</ul>

<iframe id="CurrentlySelected" width="800px" height="600px" src="http://www.somewebsite.com"></iframe>

JS不是我的强项，但我在这里看不出任何问题......有什么想法吗？

另一个问题是iframe的背景与其src属性中链接的网站没有相同的颜色......

修改
iframe中网站背景颜色的问题似乎是谷歌Chrome的问题，任何人都知道修复？

Answer 1

当您撰写document.location.reload(true)时，您正在刷新父页面，重置<iframe>以指向原始网址。
删除该行;设置src属性将重新加载框架。

此外，您在document.getElementById元素存在之前调用<iframe>;您应该在<script>之后移动<iframe>块。

Answer 2

试试这个......

<ul>
    <li><a href="#" onclick="change('http://www.somewebsite.com');">Website 1</a></li>
    <li><a href="#" onclick="change('http://www.thiswebsite.net');">Website 2</a></li>
</ul>

<iframe id="CurrentlySelected" width="800px" height="600px" src="http://www.somewebsite.com"></iframe>

<script type="text/javascript">
// now iframe is available...
var source = document.getElementById("CurrentlySelected")
function change(u) {
    if (source.getAttribute("src") != u) {
        source.setAttribute("src", u);
        // NOT NEEDED: document.location.reload(true);
    }
}

</script>

Answer 3

问题是你的document.location.reload(true);？如果您要更改iframe的网址，然后重新加载包含iframe的网页，则iframe的网址将设置回主机页面HTML中的状态。

Javascript函数显然没有触发

3 个答案: