从零开始的编程麓 2023-02-03 17:02 采纳率: 100%
浏览 64
已结题

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

  • 写回答

6条回答 默认 最新

  • Monster-XH 2023-02-03 17:40
    关注

    变了 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)
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • churuxu 2023-02-03 17:41
    关注

    新frame还未加载完成

    评论
  • Eliot5566 2023-02-03 17:43
    关注

    该回答引用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 的页面加载完成。

    评论 编辑记录
  • 游一游走一走 2023-02-03 17:50
    关注

    你需要等待加载完毕

    <!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>
    评论 编辑记录
  • 文盲老顾 WEB应用领新星创作者 2023-02-03 17:53
    关注

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

    第一，你需要将 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()
  }
    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-02-03 20:47
    关注
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 系统已结题 2月11日
  • 已采纳回答 2月3日
  • 创建了问题 2月3日

悬赏问题

  • ¥15 我用C语言easyx图形库绘制了一个3d游戏方框透视，但进入游戏时候鼠标准星对准方框边缘 鼠标光标就会弹出来这是啥情况怎样让光标对准绘制的方框点击鼠标不弹出光标好烦这样
  • ¥20 用Power Query整合的问题
  • ¥20 基于python进行多背包问题的多值编码
  • ¥15 相同型号电脑与配置，发现主板有一台貌似缺少了好多元器件似的，会影响稳定性和使用寿命吗？
  • ¥15 要求编写稀疏矩阵A的转置矩阵的算法
  • ¥15 编写满足以下要求的停车场管理程序，设停车场只有一个可停放n辆车的狭窄通道且只有一个大门可供车辆进出。
  • ¥15 C语言：数据子序列基础版
  • ¥20 powerbulider 导入excel文件，显示不完整
  • ¥15 用keil调试程序保证结果进行led相关闪烁
  • ¥15 paddle训练自己的数据loss降不下去