How to disable query from effecting the entire html page?
Question
I am trying to load an html page into anothter html page . I have used the reference : Embedding Html page inside another Html page without using iFrames
I have a html page say(page1.html) . Now I want to load the contents of another page(page2.html) into the div element of page1.html . However ,I am able to do it in a basic form using jquery . Now, my problem is that , all the external styles (javascript , css ) will be applied to the whole of page1.html document rather than the div element itself . Is there any way to apply all the styling only to the selected div element of page1.html rather than the entire page1.html ?
Also , it takes a while (1-3sec) to load the page after its inside page is loaded .Can this delay be minimized ?
The code is as shown below :
<html>
<head>
<script src="./jquery-1.6.2.min.js"></script>
<script>
var current_page=1;
function prev()
{
//pass the prev pageno
if(current_page-1>0)
{
location.href = "http://192.168.12.77:8000" + "?page="+(current_page-1);
}
else
{
alert('You are viewing the first page !');
}
}
function next()
{
//pass the next page no
if((current_page+1)>=4)
{
alert("You are viewing the last page !");
}
else
{
location.href = "http://192.168.12.77:8000" + "?page="+(current_page+1);
alert(current_page+1);
}
}
</script>
<body>
<table>
<tr>
<td width ="150">
<button id="prev" onclick="prev()">Previous</button>
</td>
<td height="800" width ="1000">
<div id="dummy_body">
</div>
</td>
<td width ="150" style="padding:00px 20px">
<button id="prev" onclick="next()" >Next</button>
</td>
</tr>
</table>
<script> $(function() {
$("#dummy_body").load(".test1.html");
});
</script>
</body>
</html>
1 answers
solution1
0 2014-08-13 07:35:34
AFAIK there are two ways to solve your problem.
If you are using HTML5, you can use the scoped attribute for style blocks.
<div> <style scoped> ... </style> </div>The css in above style block will not affect anything outside the enclosing div. In your case you might have to preprocess the page to be loaded by making all style scoped. For more, refer to Saving the Day with Scoped CSS
In your case best approach would be to use an iframe. Once you load the page inside an iframe, its css will not affect the rest of the page.
var iframe = document.getElementById('iframe'); var html = '<p>Hello World!</p>'; iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close();
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.