记iframe获取src遇到的坑

记iframe获取src遇到的坑

问题

使用iframe.src取出的值对iframe窗口重新赋值

var iframeList = document.querySelectorAll('iframe')

for (let i = 0; i < iframeList.length; i++) {

iframeList[i].setAttribute('src', iframeList[i].src)

}

代码运行后,iframe窗口显示的都是父级页面

排查过程

1.在赋值之前将取出的值在控制台打印出来

console.log('iframe'+i,iframeList[i].src)

此时发现,控制台打印出来的地址已经是父级页面的地址了,可以排除赋值错误。 2.检查页面元素 发现iframe的src为unknown,初步锁定问题,既然src为unknown,就不能使用iframe.src的方法获取iframe窗口的地址

寻找方法

虽然src不能获取到,但页面呈现没有问题,猜想iframe的contentWindow是可以获取到的,所以在控制台输出iframe.contentWindow。发现contentWindow确实有内容。对输出内容一一查看,看到iframe的href指向是正确的。

尝试解决

将获取iframe的src的方法改成获取获取href

var iframeList = document.querySelectorAll('iframe')

for (let i = 0; i < iframeList.length; i++) {

iframeList[i].setAttribute('src', iframeList[i].contentWindow.location.href)

}

代码运行,显示正确

总结

1.修改iframe的src后需要reload刷新嵌入页面,不然页面不改变 2.修改iframe的href,其src不改变,在页面检查元素是就会出现src(unknown)的情况 综上,避免直接对href操作,修改嵌入页面,采用修改src后刷新更好。

🎨 相关创意作品

2025女篮世界杯完整赛程详情与各阶段比赛安排一览
365bet线路检测

2025女篮世界杯完整赛程详情与各阶段比赛安排一览

📅 07-30 👁️ 7903
喝红酒多少能喝醉,一个正常人要喝多少红酒才会醉?
365速发国际是黑平台吗

喝红酒多少能喝醉,一个正常人要喝多少红酒才会醉?

📅 07-05 👁️ 1380
防盗门开锁技巧图解(怎么开防盗锁、换防盗门锁怎么更换)
365速发国际是黑平台吗

防盗门开锁技巧图解(怎么开防盗锁、换防盗门锁怎么更换)

📅 07-17 👁️ 5137