将HTML内容从一个页面提取到另一个页面

时间:2011-09-19 15:04:37

标签: javascript html css

我有一个页面,其中包含许多包含不同类型信息的标题。此页面是与特定主题相关的所有信息的合并。我们有许多其他页面应该单独显示这些单独的标题,但不会显示所有标题(类似于iframe,但没有所有页面内容)。

有没有办法设置合并页面,其中一些ID可以单独由其他页面提取,因此只显示各个ID中的内容?

我使用以下方法测试了jQuery方法。

内容页面

<html>

<head><title>page 1</title></head>

<body>

<div id="info1">
This is DIV 1 info.
</div>


<div id="info2">
This is DIV 2 info.
</div>

</body>

</html>

检索页面     

<head>
<title>page 2</title>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

<script>
    $("#info1").load("page1.htm");
</script>

<script>
    $("#info2").load("page1.htm");
</script>

<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>

<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

</body>

</html>

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery .load()和页面片段来完成此操作。这是文档:  http://api.jquery.com/load/