javascript - 如何获取 iframe 的当前 URL(而不是 src)？

Question

这个问题已经有答案了:

Get current URL from IFRAME (9 个回答)

已关闭 5 年前。

我的代码中有以下 iframe。

<iframe src="http://www.w3schools.com" id="myframe" name="myframe" height="100%" width="100%"></iframe>

我需要获取在 iframe 中进行一些导航后显示的页面的新 URL。

我尝试了多种方法，但都没有达到我想要的效果。某些方法返回与 src 相同的 URL。其他则导致安全问题。

如何使用 AngularJS 完成此任务？

(请求好友)

Answer 1

当您评论我的上一个答案时，这是我的 new one form Marco Bonelli

同源安全策略

您无法访问 <iframe>对于 javascript，如果你能做到的话，这将是一个巨大的安全缺陷。对于同源安全策略，任何浏览器都会阻止任何尝试访问具有其他来源的框架的脚本。

例如，如果您位于 http://www.example.com并想要访问 src="http://www.anothersite.com"你将无法做到这一点，因为框架有另一个起源。

如果未维护以下至少一个变量，则认为来源不同:

<protocol>://<hostname>:<port>/path/to/page.html

如果您想访问框架，协议(protocol)、主机名和端口必须与您的域相同。

解决方法

即使同源策略会阻止脚本操作具有不同来源的站点的内容，如果您拥有两个域/站点，则可以使用 window.postMessage 及其相关事件 window.onmessage 在两个域/站点之间发送消息来解决此问题两页，如下所示:

在您的主页中:

var frame = document.getElementById('your-frame-id');

frame.contentWindow.postMessage(/*any variable or object here*/, '*');

In your <iframe> (contained in the main page):

window.addEventListener('message', function(event) {

    // IMPORTANT: Check the origin of the data!
    if (~event.origin.indexOf('http://yoursite.com')) {
        // The data has been sent from your site

        // The data sent with postMessage is stored in event.data
        console.log(event.data);
    } else {
        // The data hasn't been sent from your site!
        // Be careful! Do not use it.
        return;
    }
});