将“源”页面中的div放入“目标”页面中的div不会捕获脚本。
来自目标(接收)页面的代码:
TOC链接代码:
<li class="sub_menu--item">
<a href="#" class="sub_menu--link sub_menu--link__active" onClick="changeText('modalimage.html #source')">Network Topology</a>
</li>
获取“source”div的JavaScript代码:
<script type="text/javascript">
function changeText(source){
$("#target").load(source)
}
</script>
“来源”页面的HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="flex-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<link href="flex-style.css" rel="stylesheet" type="text/css">
<div id="source">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img/networkdiag.png" alt="Network Architecture" width="657" height="333">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script> <!-- This doesn't seem to get loaded with the rest of the div
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</div>
</body>
</html>
使用Chrome浏览器,这是在changeText()函数加载“source”页面后,Developer Tools中显示的结果: