在前端开发中，我们经常需要在网页中嵌入iframe，以便展示外部的网页内容。但是，在某些情况下，我们需要获取这个iframe的当前URL，以便进行一些操作。本文将介绍如何使用JavaScript来获取iframe的当前URL，并提供示例代码。
iframe简介
iframe是HTML语言中的一个标签，可以嵌入其他网页或者资源。使用iframe可以方便地在当前网站中展示其他网站的内容，比如说在博客中嵌入YouTube视频或者Twitter帖子等。
<iframe src="http://example.com"></iframe>
在上面的示例代码中，我们将一个网站http://example.com 嵌入到了当前页面中。
获取iframe的当前URL
在某些情况下，我们需要获取iframe的当前URL以便进行操作，例如根据URL中的查询参数进行不同的逻辑处理。下面是获取iframe当前URL的代码：
const iframe = document.getElementById("my-iframe");
const currentUrl = iframe.contentWindow.location.href;
console.log(currentUrl);在上面的代码中，我们首先通过getElementById方法获取到id为“my-iframe”的iframe元素。然后，通过contentWindow属性获取到iframe中的window对象，从而获取到当前URL。
需要注意的是，由于浏览器的同源策略，如果iframe内的内容来自不同的域名，则无法通过contentWindow获取到window对象，从而无法获取到当前URL。
示例代码
下面是一个完整的示例代码，展示了如何获取iframe的当前URL，并在控制台中输出：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
------
------- -------------- ----------------------------------
--------
----- ------ - -------------------------------------
----- ---------- - -----------------------------------
------------------------
---------
-------
-------在上面的示例代码中，我们首先定义了一个id为“my-iframe”的iframe元素，并将http://example.com 嵌入到其中。然后，通过JavaScript代码获取iframe的当前URL，并将其输出到控制台中。
结论
通过本文，我们学习了如何使用JavaScript获取iframe的当前URL，并提供了详细的示例代码。需要注意的是，由于同源策略的限制，这一方法可能无法适用于所有情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12828