Question

我想在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>

Answer 1

您可以使用iframe将一个html页面放在另一个页面中。我将div的内部内容更改为iframe，并将html页面作为src。我还添加了一种样式，使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更改一个html页面上的div的内容与来自另一个页面的div的内容？

1 个答案: