我想使用 TOC 中的链接(例如，单击我)将一个页面上的 div 的当前内容替换为另一页上的 div 的内容。我只想使用 JavaScript 来做到这一点。
这是两个页面的代码:
原始页面(接收新内容)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type= "text/javascript">
function loadContent(targetPage){
document.getElementById("content").innerHTML = "New text!"; //How do I change this to get the contents of a div in another HTML file?
}
</script>
</head>
<body>
<div id="link">
<a href="#" onClick="loadContent("newContent.html")">Click Me.</a>
</div>
<p></p>
<div id="content">
<p>This is the original content.</p>
</div>
</script>
</body>
</html>
源页面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Content Source</title>
</head>
<body>
<div id="newContent">
<p>New Content:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Est velit egestas dui id ornare arcu. Ultricies leo integer malesuada nunc vel. Risus sed vulputate odio ut. Senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
最佳答案
您可以使用 iframe 将一个 html 页面放在另一个页面中。我将div的内部内容更改为以html页面为src的iframe。我还添加了一种样式，使 iframe 成为页面的大小。
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.p2iframe{
width:100%;
height:100%;
float:left;
border:0px;
overflow:hidden;
}
</style>
<script type= "text/javascript">
function loadContent(){
document.getElementById("content").innerHTML = "<iframe class=\"p2iframe\" src=\"page2.html\" name=\"p2iframe\"></iframe>";
}
</script>
</head>
<body>
<div id="link"><a href="#" onClick="loadContent();">Click Me.</a></div>
<div id="content"><p>This is the original content.</p></div>
</body>
</html>
关于javascript - 如何使用 javascript 将一个 html 页面上的 div 内容更改为另一页面上的 div 内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48391763/