改变

Question

是否有办法使用iframe，但在点击iframe内部的内容时，仍然会更改地址栏？我想在页面顶部有一个水平条，带有一个音乐播放器，可以在浏览网站时播放音乐。但我也希望人们能够轻松地为页面添加书签。

我搜索过，但找不到答案。许多人只是想改变iframe中加载的URL ...这不是我想要的。我希望浏览器中显示的实际地址栏能够更新。

Answer 1

这句话是为了帮助我达到30个字符的最低限度。忽略这一点并阅读下一句话以获得答案：

没有

<强>更新

“改变”和“重定向”是两回事。你需要澄清它是什么。 “更改”地址栏是不可能的。 “重定向”是可能的。

点击iframe中的标准链接不会影响最顶层的窗口。 iframe中的Javascript重定向的快速示例如下：

TOP WINDOW：

<html>
<head></head>
<body>
    <iframe src="http://yoursite.com/iframe_test.html" />
</body>

IFRAME TEST：

<html>
<head>
    <script>
    window.onload = ready;
    function ready()
    {
        document.getElementById("link1").onclick = linkClick;
        document.getElementById("link2").onclick = linkClick;
    }
    function linkClick(e)
    {
        e.preventDefault();
        window.top.location.href = this.href;
    }
    </script>
</head>
<body>
    <a id="link1" href="http://youtube.com">Link1</a>
    <a id="link2" href="http://facebook.com">Link2</a>
</body>

<强>说明

如果没有使用Javascript，当您点击iframe中的链接时会发生的情况是，您将保留在原始页面上，并且iframe将重定向到您点击的链接。以这种方式在iframe中使用Javascript可以强制最顶层的帧重定向。

我强烈反对以任何方式依赖这一点。一般来说，这是一个草率的编程，如果可能的话，我会完全远离iframe。

Answer 2

是的，你可以，但它不是一个简单的解决方案，它有一些限制

改变

您可以一起使用 Web API messages 和 history API 来获得所需内容。

实施例

Jsfiddle

重新定向

您可以使用上面的示例，并使用window.location.replace

替换推送历史记录

请将代码段视为提示以获得您想要的内容。上面的例子没有考虑到安全性（即iframe脚本正在向父节点发送消息，无论其来源如何）。

使用iframe时更改地址栏

2 个答案:

改变

实施例

重新定向