Insert a paragraph from an external HTML page to another HTML page with Javascript
Question
I'm new to JavaScript so excuse me if what I want to do doesn't make any sense. 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? 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
<h3>Header in page 1</h3>
<p>Paragraph in page 1</p>
External Page 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.
FYI - I cannot use PHP since I don't have access to a server.
Thanks
3 answers
solution1
2 2014-10-15 17:48:57
You could use jQuery load() method.
The
.load()method, unlike$.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
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. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
solution2
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. 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.
solution3
1 2014-10-15 18:10:40
you can achieve that easily with jquery using $.post or $.get method
here is the content of the main page let's call it for example 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
so the content of external_page1.html (in our case )
<h3>Header in page 1</h3>
<p>Paragraph in page 1</p>
and the content of the external_page2.html (in our case )
<h3>Header in page 2</h3>
<p>Paragraph in page 2</p>
just remember that all the three files are in the same level
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.