我在这里要做的是通过使用jquery在单击按钮时设置srcdoc属性，在iframe内动态添加内容并将其显示为HTML。不过，当我点击按钮时，什么也没发生：
奇怪的是，当我用document.getElementById("myFrame)替换$("#myFrame").srcdoc时，代码按预期工作。这让我更加困惑。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Jquery Project - Practice </title>
<script type = "text/javascript" src ="jquery-3.4.1.min.js"> </script>
<link href="jquery-ui/jquery-ui.css" rel ="stylesheet">
<script src = "jquery-ui/jquery-ui.js"> </script>
<style type="text/css">
html, body {
font-family:Helvetica, sans-serif;
margin:0px;
padding:0px;
height:100%;
width:100%;
}
div, textarea {
margin:0px;
padding:0px;
}
* {
margin:0px;
padding:0px;
}
#divOne {
width:100%;
height:100%;
background-color:aliceblue;
}
</style>
</head>
<body>
<div id="divOne">
<iframe id ="myFrame"></iframe>
<button id = "click"> Click Me! </button>
</div>
<script type ="text/javascript">
$(document).ready(function() {
$("#myFrame").css({
"height":"300px",
"width":"300px",
"margin":"200px",
"background-color":"bisque"
});
$("#click").click(function() {
$("#myFrame").srcdoc = "<p>Hello World!</p>" ;
//alert("clicked");
});
});
</script>
</body>
</html>使用.attr()设置
$(document).ready(function() {
$("#myFrame").css({
"height": "300px",
"width": "300px",
"margin": "200px",
"background-color": "bisque"
});
$("#click").click(function() {
$("#myFrame").attr("srcdoc", "<p>Hello World!</p>");
});
});html,
body {
font-family: Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
div,
textarea {
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
#divOne {
width: 100%;
height: 100%;
background-color: aliceblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divOne">
<iframe id="myFrame"></iframe>
<button id="click"> Click Me! </button>
</div>