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

给<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日