iframe外链网页，如何检测iframe的URL变化？

什么是iframe外链网页？

iframe是html内嵌网页元素的一种标签。它允许在您的网页内嵌入其他网页或页面元素，使Web页面的整体效果更流畅。将其他网站的网页嵌入您的网页是通过iframe外链网页实现的。

为什么需要检测iframe的URL变化？

外链iframe的URL通常是在第三方网站中托管的，以便在您的网站中展示内容。您可能需要跟踪iframe中网页的变化情况，例如，iframe中的广告代号可能需要返回URL或展开状态。此外，iframe变化可能是其他第三方跟踪或统计的标准，例如带有Google Analytics或Facebook Pixel的AJAX和HTML应用程序跟踪。

如何监听iframe的URL变化？

最安全和最可靠的方法是使用Window.postMessage()实现跨域通信。该API允许文档与嵌入的iframe或父窗口进行双向通信。可以在iframe中添加以下代码：

```javascript

window.addEventListener(\"message\", receiveMessage, false);
function receiveMessage(event)
{
if (event.origin !== \"http://example.com\") //假设窗口已知窗口URL
return;

if (event.data === \"Iframe_loaded\")
console.log(\"Iframe加载成功！！\");
}

```

在外围文档中添加以下代码：

```javascript
function sendMessageToIframe()
{
var iframe = document.getElementById('myIFrame');
iframe.contentWindow.postMessage('Hello', '');
}
```

如何确定框架已加载？

在窗体加载时，窗体会触发window.onload事件。可以将要执行的代码添加到该函数中：

```javascript
function activateIframe()
{
var iframe = document.getElementById('myIFrame');

iframe.onload = function()
{
console.log(`iframe ${iframe.src} 已经加载`);
};

iframe.src = \"https://example.com/iframe-page\";
}
```

如何获取iframe中的URL？

可以使用window.location.href访问iframe中的URL。例如：

```javascript
function getIFrameUrl()
{
var iframe = document.getElementById('myIFrame');
console.log(iframe.contentWindow.location.href);
}
```

结论

使用PostMessage和Window.onload方法可以检测到外链iframe的URL变化。每当URL更改时，可以开始执行自己的代码。希望本文可以为您提供研究iframe及其变化的必要性。