Question

我是JavaScript的新手，请原谅我，如果我想要做的事情没有任何意义。我想要做的是将一个段落和一个标题从外部HTML页面导入到另一个HTML页面，这是否可以通过JavaScript实现？如果是，你可以指出我能找到正确信息的地方。

将要进行导入的页面。

  <ul>
        <li>
          <h3>Header imported form page 1</h3>
          <p>Paragraph imported from page 1</p>
        </li>

        <li>
          <h3>Header imported form page 2</h3>
          <p>Paragraph imported from page 2</p>
        </li>
  </ul>

外部页面1

  <h3>Header in page 1</h3>
  <p>Paragraph in page 1</p>

外部页面

  <h3>Header in page 2</h3>
  <p>Paragraph in page 2</p>

我搜索了但我发现的大多数帖子都是导入完整的HTML页面。

仅供参考 - 我无法使用PHP，因为我无法访问服务器。

由于

Answer 1

您可以使用jQuery load()方法。

与.load()不同，$.get()方法允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定第一个空格后面的字符串部分是jQuery选择器，用于确定要加载的内容。

例如：

 $( "#result" ).load( "ajax/test.html #container" );

当此方法执行时，它会检索ajax / test.html的内容，但随后jQuery会解析返回的文档以查找ID为container的元素。此元素及其内容将插入到具有结果ID的元素中，并且将丢弃检索到的文档的其余部分。

Answer 2

这听起来很合理。在您的页面中，您可以使用jQuery将ajax GET请求发送到外部网页，然后应该使用该页面的完整HTML进行响应。使用该HTML字符串创建一个jQuery对象，然后您可以使用常规jQuery方法搜索/解析它，并提取标题文本，段落文本或您感兴趣的任何其他内容。

Answer 3

您可以使用 $。发布或 $。获取方法

轻松实现 jquery

这是主页面的内容，例如 test.html

<html>
<head>
    <title>test </title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="external_page1">
        <!-- here goes the content of the external_page1 -->

    </div>
    <div id="external_page2">
        <!-- here goes the content of the external_page2 -->

    </div>
    <script>
    $(document).ready(function(){
        $.get('external_page1.html',function(data){ $('#external_page1').html(data);});
        $.get('external_page2.html',function(data){$('#external_page2').html(data);});

        // you can also use $.post method instead of $.get 

        // $.post('external_page1.html',function(data){ $('#external_page1').html(data);});
        // $.post('external_page1.html',function(data){$('#external_page2').html(data);});

    });
    </script>
</body>
</html>

和两个外部页面的内容我称之为external_page1.html和external_page2.html

所以 external_page1.html 的内容（在我们的例子中）

<h3>Header in page 1</h3>
<p>Paragraph in page 1</p>

以及 external_page2.html 的内容（在我们的例子中）

<h3>Header in page 2</h3>
<p>Paragraph in page 2</p>

请记住所有三个文件都处于同一级别

使用Javascript将外部HTML页面中的段落插入另一个HTML页面

3 个答案: