使用Javascript将段落从外部HTML页面插入到另一个HTML页面
[英]Insert a paragraph from an external HTML page to another HTML page with Javascript
问题描述
I'm new to JavaScript so excuse me if what I want to do doesn't make any sense. 
我是JavaScript新手，所以如果我想做的事情没有任何意义，请原谅。 What I want to do is import a paragraph and a header from an external HTML page to another HTML page, is this possible with JavaScript? 我想做的是将一个段落和标题从外部HTML页面导入到另一个HTML页面，JavaScript可以做到这一点吗？ If yes can you point me to where I can find the right info. 如果可以，您可以指出我在哪里可以找到正确的信息。
Page where the imports are going to be done. 将要导入的页面。
<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>
External Page 1 外部第1页
<h3>Header in page 1</h3>
<p>Paragraph in page 1</p>
External Page 2 外部第2页
<h3>Header in page 2</h3>
<p>Paragraph in page 2</p>
I searched but most of the posts I found are to import complete HTML pages. 我进行了搜索，但发现的大多数帖子都是导入完整的HTML页面。
FYI - I cannot use PHP since I don't have access to a server. 仅供参考-由于我无权访问服务器，因此无法使用PHP。
Thanks 谢谢
3 个解决方案
解决方案1
2 2014-10-15 17:48:57
You could use jQuery load() method. 您可以使用jQuery load()方法。
The
.load()method, unlike$.get(), allows us to specify a portion of the remote document to be inserted.$.get()不同，.load()方法允许我们指定要插入的远程文档的一部分。 This is achieved with a special syntax for the url parameter.
For example: 例如：
$( "#result" ).load( "ajax/test.html #container" );
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container.
解决方案2
1 2014-10-15 17:48:41
This sounds reasonable. 听起来很合理。 From your page, you can use jQuery to send an ajax GET request to the external web page, which should then respond with the full HTML of that page. 在页面上，您可以使用jQuery将ajax GET请求发送到外部网页，然后该外部网页应以该页面的完整HTML响应。 Use that HTML string to create a jQuery object, and then you can search/parse it with regular jQuery methods, and pull out the header text, paragraph text, or whatever else you're interested in. 使用该HTML字符串创建一个jQuery对象，然后可以使用常规jQuery方法搜索/解析该对象，并提取标题文本，段落文本或其他感兴趣的内容。
解决方案3
1 2014-10-15 18:10:40
you can achieve that easily with jquery using $.post or $.get method 您可以使用$ .post或$ .get方法通过jquery轻松实现
here is the content of the main page let's call it for example test.html 这是主页的内容，让我们称之为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>
and the content of the two external pages i called them external_page1.html and external_page2.html 以及两个外部页面的内容，我称它们为external_page1.html和external_page2.html
so the content of external_page1.html (in our case ) 因此， external_page1.html的内容（在我们的示例中）
<h3>Header in page 1</h3>
<p>Paragraph in page 1</p>
and the content of the external_page2.html (in our case ) 以及external_page2.html的内容（在我们的示例中）
<h3>Header in page 2</h3>
<p>Paragraph in page 2</p>
just remember that all the three files are in the same level 只要记住，这三个文件都在同一级别
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.