HTML to import another HTML file not displaying correctly
Question
I need to essentially import another HTML file into an HTML file. I've tried three different setups of this, linked below, and none of them display properly. I would appreciate any help in fixing this. For those who are wondering why I am doing this, the HTML and other linked files are created using a program which uploads frequently and write over the old files, and I would like to do this so I can change the fonts without having to redo that every time a new copy is uploaded.
Here's those links: jaredcaputo.photography/1/index2.html, jaredcaputo.photography/1/index22.html, jaredcaputo.photography/1/index222.html
Index 2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("index.html");
});
</script>
</head>
<script>
var LR = LR || {};
</script>
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="assets/css/custom.css" >
<body>
<div id="includedContent"></div>
</body>
</html>
Index 22:
<head>
<link rel="import" href="index.html">
</head>
Index 222:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="index.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
The file I'm trying to import is jaredcaputo.photography/1/index.html
Thanks very much!
3 answers
solution1
2 2016-04-30 19:15:56
AJAX is normally used for this. Put this in the top of the two pages that you want to import INTO:
$(document).ready(function(){
$.get( "index2.html", function( data ) {
$( "body" ).append(data);
});
});
It simply gets and appends the index2.html file onto the body of the current page.
solution2
2 ACCPTED 2016-04-30 19:55:29
The samples are working fine, The page is showing in the DOM, the only part that isnt is the pages body and that's because you are trying to put a <body> element inside a <div> and another page that already has a <body> .
You either need to modify the embedded document to be an incomplete HTML doc without the head and body tags, or you need to use an IFrame to allow the child content to have its own DOM.
solution3
1 2016-04-30 18:47:11
Why not just use HTML imports as described in the Web Components spec ?
If you're concerned with browser compatibility, there's also a polyfill , which you can learn about here .
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.