阅读 657

js能否获取iframe到当前url

1、iframe中的src属性和iframe当前url一致吗

iframe默认加载src属性的url,但是如果iframe内部发生跳转,当前url并不会同步到src属性上

2、iframe如何监听iframe的url变化

(1)onload

iframe每次重新加载页面时都会触发onload方法

iframe.onload = function (e) {
  // 
}
复制代码

(2)监听iframe属性变化

使用MutationObserver监听iframe的src属性变化,需注意的是如果是iframe内部执行的方法导致url变化则不会触发src属性变化

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(items => {
  items.forEach(item =>{
      console.error(item)
      iframeChange(item.oldValue, item.target.src, item.target)
  })
})

var options = {
  attributes: true, // 属性
  attributeFilter: ["src"] // 表示需要观察的属性
}


observer.observe(Iframe, options);

function iframeChange(oldValue, newValue, iframeData){
  console.log("旧地址:"+oldValue)
  console.log("新地址:"+newValue)
}
复制代码

3、获取iframe当前url

通过contentWindow获取

iframe.contentWindow.location.href
复制代码

但是对于iframe和页面有跨域的 , 是无法获取到contentWindow.location.href的

4、对于Chrome中如果页面加载失败,Window.location.href无法获取到实际访问的目标链接,但是可以通过以下方法获取

Iframe.contentWindow.loadTimeData && SSOIframe.contentWindow.loadTimeData.data_.summary.failedUrl

或
window.document.querySelector('#reload-button').url
复制代码
文章分类
前端
文章标签