正文

JavaScript 中获取 iframe 的 src 属性值，可以通过以下几种方法实现： 1. 直接通过 iframe 元素的 src 属性访问： ```javascript var iframeSrc = document.getElementById('myIframe').src; ``` 2. 使用 iframe 的 contentWindow 属性，再通过

/0 浏览量
0410

在网页开发中，iframe（内嵌框架）是一种常见的元素，用于在当前页面上嵌入另一个页面。有时候，你可能需要获取嵌入的 iframe 的 src 属性值，以便进行一些操作或者检查。下面将详细介绍在 JavaScript 中获取 iframe 的 src 属性值的几种方法。

方法一：直接通过 iframe 元素的 src 属性访问

这是最直接的方法，通过 iframe 元素的 id 或其他属性选择器获取 iframe 元素，然后直接访问其 src 属性。

var iframe = document.getElementById('myIframe');
var iframeSrc = iframe.src;
console.log(iframeSrc); // 输出 iframe 的 src 属性值

这种方法简单易行，但需要注意的是，这种方法仅适用于同源 iframe。

方法二：使用 iframe 的 contentWindow 属性

如果你需要访问非同源的 iframe，可以使用 contentWindow 属性，再通过 window 对象的 location 属性访问。

var iframe = document.getElementById('myIframe');
var iframeSrc = iframe.contentWindow.location.href;
console.log(iframeSrc); // 输出 iframe 的 src 属性值

这种方法同样简单，但同样需要注意跨域安全限制。

方法三：监听 iframe 的加载事件

如果 iframe 没有加载完成，直接访问 src 属性可能会得到一个空的字符串。为了确保 src 属性已经被加载，可以使用 window.onload 或者 iframe.onload 事件来确保 src 属性已经被加载。

使用 window.onload 事件

window.onload = function() {
    var iframe = document.getElementById('myIframe');
    var iframeSrc = iframe.src;
    console.log(iframeSrc); // 输出 iframe 的 src 属性值
};

使用 iframe.onload 事件

var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    var iframeSrc = this.src;
    console.log(iframeSrc); // 输出 iframe 的 src 属性值
};

这两种方法都能确保在 iframe 加载完成后获取其 src 属性值。

总结

在 JavaScript 中获取 iframe 的 src 属性值有几种方法，可以根据实际需求选择合适的方法。需要注意的是，在访问非同源 iframe 时，可能会遇到跨域安全限制。在实际开发中，可以根据具体情况选择合适的方法，以确保代码的健壮性和安全性。

-- 展开阅读全文 --