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

问题简述

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

代码

HTML

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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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");
})

期望结果

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

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

document.getElementById('addExam').addEventListener('click', function() {
    document.getElementById('test').innerHTML = "内容已更改"
    alert("123456");
})

望采纳！！！新年快乐🎉🎉

你的 iframe 应该这样写，定义一个 id

<iframe id="myIFrame" xxxxxxx>

然后，通过下面的代码进行设置即可。

var iframe = document.getElementById('myIFrame')
iframe.querySelector("#test").innerHTML="新年快乐，望采纳！！！"