js iframe src变更后找不到新src对应文件的函数问题

变更iframe的src后 无法调用新src文件函数 只能调用旧src的函数
下文 变更的iframe标签的id和name都是“iframeRight”
新的src和旧src都是本机文件

//父级页面
function send_songdata1(data){
            var k=document.getElementById("iframeRight").src
            console.log(k);
            document.getElementById("iframeRight").src="新的src";
            var i=document.getElementById("iframeLeft").src
            console.log(i)
            window.frames["iframeRight"].send_songdata2(data);
}

//旧src设置的函数
function send_songdata2(data){
            console.log(111);
            console.log(data)
            
        }
//新src设置函数
function send_songdata2(data){
            console.log(222);
            console.log(data)
            
        }

运行结果：

img


所以目前已知问题：变更src后 无法调用新src文件里的函数
请求各位指点一下TT

变了 iframe 的 src 后，你要使用 onload 事件。保证新页面已加载完成，再调用新页面里的函数试试，修改后的：

// 父级页面
function send_songdata1(data){
var iframeRight = document.getElementById("iframeRight");
console.log(iframeRight.src);
iframeRight.src="新的src";
iframeRight.onload = function() {
window.frames["iframeRight"].send_songdata2(data);
}
}

// 旧src设置的函数
function send_songdata2(data){
console.log(111);
console.log(data)
}

// 新src设置函数
function send_songdata2(data){
console.log(222);
console.log(data)
}

新frame还未加载完成

该回答引用ChatGPT
可以在变更 iframe 的 src 后，在一定时间内等待页面加载完成，再通过 window.frames 调用新 src 里的函数。

例如：




function send_songdata1(data){
    document.getElementById("iframeRight").src = "新的src";
    setTimeout(function(){
        window.frames["iframeRight"].send_songdata2(data);
    }, 500);
}

将代码中的 setTimeout 的时间设置足够长，以确保新 src 的页面加载完成。

你需要等待加载完毕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function send_songdata1() {
        var data = Math.random()
        console.log(document.getElementById("iframeRight").src);
        window.frames["iframeRight"].contentWindow.send_songdata2(data);
        document.getElementById("iframeRight").src = "iframe2.html";
        console.log(document.getElementById("iframeRight").src);
        let testFun = () => window.frames["iframeRight"].contentWindow.send_songdata2(data);
        setTimeout(testFun, 1000)
        document.getElementById("iframeRight").onload = testFun
    }
</script>
<body>
<button onclick="send_songdata1()">测试</button>
<iframe id="iframeRight" height="100" width="100" src="iframe1.html"></iframe>
</body>
</html>

我重写了一个实现，你参考一下

第一，你需要将 iframe 作为一个对象保存到变量里

第二，你要监控 iframe 的 src 变动，在变动时触发你定义的 onload 事件

第三，在完成新页面加载后，再调用他定义的函数

  function test(){
      var ifr = window.frames['ifr']
      ifr.contentWindow.onload = function(){
          var win = arguments[0].currentTarget
          win.test()
      }
      console.log(ifr.src)
      document.getElementById('ifr').src='new.html'
      console.log(ifr.src)
      //ifr.contentWindow.test()
  }