使用 JavaScript 从另一个页面获取内容答案

【问题标题】：Get content from another page with JavaScript使用 JavaScript 从另一个页面获取内容
【发布时间】：2016-07-18 21:19:04
【问题描述】：

如何使用 JavaScript 将页面 2 中的 div 加载到页面 1。

Page2.html

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>

我想从page2获取并使用id content2 用该div的内容在page1中创建一个div，在链接被点击和删除后，对content3、content4依次执行相同的操作。

Page1.html

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<a href="#"> get content</a>
</div>
</body>
</html>

然后会是这样。

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>

我是 JavaScript 新手，我不知道该怎么做。如果有人可以提供帮助。谢谢。

已编辑：如果真的可能的话，我想要一种只使用 javascript 和不使用 jquery 的方法。我希望我的项目离线工作，我不能用 jquery 来做，因为它不起作用。我已经下载了 jquery 插件并将其粘贴到我的目录中，但是也没有用。

【问题讨论】：

Get another page's content in a variable with ajax的可能重复
查看表格和张贴。然后查看 jQuery .post() 或 AJAX 方法。这些应该可以帮助您入门...

标签： javascript html css

【解决方案1】：

您可以结合使用 JavaScript、jQuery 和 AJAX 来完成此操作。

首先，包含 jQuery 库：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

然后编写一个与此类似的 JavaScript 函数，它将用 Page2.html 文件替换 div 元素的 html 内容：

var loadNewContent = function {
  $.ajax("Page2.html", {
    success: function(response) {
      $("#content2").html(response);
    }
  }); 
};

然后您将需要一些“触发器”来运行此功能，例如：

$("#content2").on('click', loadNewContent);

希望这会有所帮助。

【讨论】：

【解决方案2】：

我使用 javascript 和 jquery 编写了一个名为 ViaJS 的小型库。它基本上允许您将内容（如 div）从源加载到页面。看看吧。

Via is a small library that allows you to load content on to a page dynamically

【讨论】：