Replace HTML page with contents retrieved via AJAX

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="...">.

132480 次浏览
小开

You could try doing 

document.getElementById(id).innerHTML = ajax_response
小开

Here's how to do it in Prototype: $(id).update(data)

And jQuery: $('#id').replaceWith(data)

But document.getElementById(id).innerHTML=data should work too.

EDIT: Prototype and jQuery automatically evaluate scripts for you.

小开

try this with jQuery: 

$('body').load( url,[data],[callback] );

Read more at docs.jquery.com / Ajax / load

小开

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>
小开

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 simplest way is to set the new HTML content using:

document.open();
document.write(newContent);
document.close();
小开

the simplest way is

$("body").html(data);

提交答案