CODEWITHSUNDEEP
javascriptjquery
AbhishekJ
AbhishekJ

Reputation: 13

Load html into div without losing js and css

I want to load a html file with it's own stlyesheet and js into a div of another page.

For example the html file i want to load will be something like this

<html><head>External syle and js</head><body></body></html>

into the div tag of other html page using

$("#divID").load("htmlpagename.html");

When ever I'm loading html it's losing css and I'm thrown with an error in console as

GET http://localhost:81/projects/js/table.js?_=1377245019877
jquery.min.js (line 6) 404 Not Found  149ms

Upvotes: 1

Views: 2848

Answers (3)

emerson.marini
emerson.marini

Reputation: 9348

If you want to keep the whole content of the page loaded, you'll need to use an iframe instead.

Information taken from the jQuery .load() documentation:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as html, title or head elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

If you decide to use an iframe, this can help you:

$("<iframe />").attr("src", "htmlpagename.html").appendTo("#divID");

Upvotes: 3

Brewal
Brewal

Reputation: 8189

Try this : 

$('<iframe />').attr('src', 'htmlpagename.html').appendTo('#divID');

fiddle

Upvotes: 1

zzlalani
zzlalani

Reputation: 24384

You can use iframe in html, so why don't you use iframe?

<html>
<head>
   <!-- Other Head Files and Tags Here -->
</head>
<body>
    <div id="divID">
        <iframe src="htmlpagename.html"></iframe>
    </div>
</body>
</html>

Upvotes: 1

Related Questions