QAI 2023-01-23 14:05 采纳率: 66.7%
浏览 59
已结题

给<iframe>中的按钮绑定事件函数

问题简述

我想给标签中的一个按钮绑定事件监听函数,但绑定后点击没有反应。
在网上查找后发现,可能要用contentDocument引用中的document,但还是没反应。(我估计是用错了,找了好久也没找到管用的)

代码

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="header">
        <img src="../static/img/header.jpg">
    </div>
  ......
    <iframe src="examList.html" class="content"></iframe>
    <script src="../static/js/manage.js"></script>
</body>
</html>

examList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="addExam" type="button" value="添加考试">
    <span id="test">测试标签</span>
</body>
</html>

JavaScript

document.querySelector('.content').contentDocument.querySelector('#addExam').addEventListener('click', function () {
    var temp = document.querySelector('.content').contentDocument;
    temp.querySelector('#test').innerHTML = "内容已更改"
    alert("123456");
})

期望结果

找到可用的给中的按钮绑定事件函数和修改内容的方法。

  • 写回答

3条回答 默认 最新

  • 有一只小精灵 2023-01-23 14:52
    关注

    把 这个移到examList.html。
    将js修改为:

    document.getElementById('addExam').addEventListener('click', function() {
        document.getElementById('test').innerHTML = "内容已更改"
        alert("123456");
    })
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月1日
  • 已采纳回答 1月24日
  • 创建了问题 1月23日

悬赏问题

  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方