Replace HTML page with contents retrieved via AJAX
Question
I have an HTML page with a typical structure:
<html>
<head>
<script src="..." ></script>
<style>...</style>
</head>
<body>
content
</body>
<script>
var success_callback = function(data) {
// REPLACE PAGE CONTENT & STRUCTURE WITH "data"
}
ajax(url, params, success_callback);
</script>
</html>
Do you think it is possible ? I've already tried to give the html tag an id and doing $(id).replace(data); with no success.
Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).
EDIT : I forgot to say that scripts in the received content have to be executed , even external scripts included using <script src="..."> .
7 answers
solution1
135 2012-08-16 10:06:36
The simplest way is to set the new HTML content using:
document.open();
document.write(newContent);
document.close();
solution2
27 ACCPTED 2009-01-27 15:18:03
try this with jQuery :
$('body').load( url,[data],[callback] );
Read more at docs.jquery.com / Ajax / load
solution3
11 2009-01-27 15:15:13
solution4
7 2009-01-27 15:07:31
你可以尝试做
document.getElementById(id).innerHTML = ajax_response
solution5
5 2014-04-30 02:17:37
最简单的方法是
$("body").html(data);
solution6
4 2009-01-27 15:22:39
I'm assuming you are using jQuery or something similar. If you are using jQuery, then the following should work:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
content
</body>
<script type="text/javascript">
$("body").load(url);
</script>
</html>
solution7
4 2009-01-27 18:01:46
Can't you just try to replace the body content with the document.body handler?
if your page is this:
<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>
Just use the document.body to replace the body.
This works for me. All the content of the BODY tag is replaced by the innerHTML you specify. If you need to even change the html tag and all childs you should check out which tags of the 'document.' are capable of doing so.
An example with javascript scripting inside it:
<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>
This way you can do javascript scripting inside the new content. Don't forget to escape all double and single quotes though, or it won't work. escaping in javascript can be done by traversing your code and putting a backslash in front of all singe and double quotes.
Bare in mind that server side scripting like php doesn't work this way. Since PHP is server-side scripting it has to be processed before a page is loaded. Javascript is a language which works on client-side and thus can not activate the re-processing of php code.
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.