在前端页面中，有时候我们需要获取iframe的当前位置信息，以便于进行后续的操作或者显示。本文将介绍如何使用JavaScript获取iframe当前位置信息，以及相关的注意事项和示例代码。
获取iframe的当前位置
要获取iframe的当前位置，我们可以通过以下步骤：
- 获取iframe的window对象
- 利用window对象的location属性获取当前位置信息
具体实现代码如下：
const iframe = document.getElementById('myIframe');
const iframeWindow = iframe.contentWindow;
const iframeLocation = iframeWindow.location.href;
console.log(iframeLocation);这里通过document.getElementById方法获取到指定id的iframe元素，然后通过contentWindow属性获取到iframe的window对象，最后通过location.href获取当前位置信息。使用console.log输出当前位置信息。
需要注意的是，获取iframe的window对象会遇到跨域问题。如果iframe和主页面不在同一个域名下，则无法获取其window对象，因此也无法获取其位置信息。
跨域问题解决方案
如果iframe和主页面不在同一个域名下，导致无法获取window对象，我们可以通过两种方式来解决跨域问题：一种是在iframe所在的页面中添加相应的header信息，允许其他域名进行访问；另一种是利用postMessage API来传递信息，从而达到获取数据的目的。
方式一：添加header信息
在iframe所在的页面中添加以下header信息：
<!-- 允许所有域名进行访问 --> <meta http-equiv="Access-Control-Allow-Origin" content="*">
或者指定某个域名进行访问：
<!-- 只允许指定域名访问 --> <meta http-equiv="Access-Control-Allow-Origin" content="http://example.com">
这里需要注意的是，这种方式需要在iframe所在的页面中进行配置，因此并不适用于第三方网站。
方式二：使用postMessage API
在主页面中发送消息：
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('getCurrentUrl', '*');在iframe所在的页面中接收消息：
window.addEventListener("message", event => {
if (event.data === "getCurrentUrl") {
const currentUrl = window.location.href;
event.source.postMessage(currentUrl, event.origin);
}
});这里通过postMessage方法向iframe发送一个消息，并指定接收方的域名为任意。在iframe所在的页面中，我们监听message事件，如果收到了名为getCurrentUrl的消息，则将当前url信息通过postMessage方法返回给主页面。
需要注意的是，这种方式需要在两个页面之间进行通信，并且需要进行安全验证，以防止非法接入。
示例代码
下面给出一个完整的示例代码，演示如何获取iframe的当前位置信息：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
------- ------------- ----------------------------------
--------
----- ------ - ------------------------------------
-- ---------------------
------------------------------ ------------------ ------------- ------------ --------------
------------------------------- -- -- -
-- -----------------
----- ------------ - ---------------------
-- --------------------
----- -------------- - ---------------------------
----------------------------
---
---------
-------
-------在这个示例中，我们向iframe添加了sandbox属性，允许所有域名进行访问。然后在load事件中获取iframe的window对象，并通过location.href属性获取当前位置信息。最后使用console.log输出当前位置信息。
以上就是关
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15608