blocks|key|3344773|text|最简单的方法是使用以下命令设置新的HTML内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3344774|document.open();
document.write(newContent);
document.close();|code-block|syntax|javascript|3344775|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The simplest way is to set the new HTML content using:</p>

<pre><code>document.open();
document.write(newContent);
document.close();
</code></pre>


blocks|key|349684|text|使用jQuery尝试以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|349685|$('body').load(+url,[data],[callback]+);|code-block|syntax|javascript|349686|有关更多信息，请访问docs.jquery.com+/+Ajax+/+load|349687|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Ajax/load#urldatacallback^0|2|6|0|0|A|T|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>try this with <strong>jQuery</strong>: </p>

<pre><code>$('body').load( url,[data],[callback] );
</code></pre>

<p>Read more at <a href="http://docs.jquery.com/Ajax/load#urldatacallback" rel="noreferrer">docs.jquery.com / Ajax / load</a></p>


blocks|key|349675|text|下面是如何在Prototype中做到这一点：$(id).update(data)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|349676|和jQuery：$('#id').replaceWith(data)|349677|但是document.getElementById(id).innerHTML=data也应该可以工作。|349678|编辑:+Prototype和jQuery会自动为你评估脚本。|349679|entityMap|0|LINK|mutability|MUTABLE|url|http://prototypejs.org/api/element/update|1|http://docs.jquery.com/Manipulation/replaceWith#content^0|M|I|6|9|0|0|8|Q|1|6|1|0|2|16|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1A|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|U]]]]

<p>Here's how to do it in <a href="http://prototypejs.org/api/element/update" rel="noreferrer">Prototype</a>: <code>$(id).update(data)</code></p>

<p>And <a href="http://docs.jquery.com/Manipulation/replaceWith#content" rel="noreferrer">jQuery</a>: <code>$('#id').replaceWith(data)</code></p>

<p>But <code>document.getElementById(id).innerHTML=data</code> should work too.</p>

<p>EDIT: Prototype and jQuery automatically evaluate scripts for you.</p>


blocks|key|354652|text|你可以试着做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354653|document.getElementById(id).innerHTML+=+ajax_response|code-block|syntax|javascript|354654|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could try doing </p>

<pre><code>document.getElementById(id).innerHTML = ajax_response
</code></pre>


blocks|key|3344794|text|最简单的方法是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3344795|$("body").html(data);|code-block|syntax|javascript|3344796|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>the simplest way is</p>

<pre><code>$("body").html(data);
</code></pre>


blocks|key|354688|text|您就不能尝试用document.body处理程序替换正文内容吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354689|如果你的页面是这样：|354690|<html>
<body>
blablabla
<script+type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>|code-block|syntax|javascript|354691|只需使用document.body替换主体即可。|354692|这对我很有效。BODY标记的所有内容都将替换为您指定的innerHTML。如果你甚至需要更改html标签和所有孩子，你应该检查一下“文档”的哪些标签。都有能力做到这一点。|354693|其中包含javascript脚本的示例：|354694|<html>
<body>
blablabla
<script+type="text/javascript">
var+changeme+=+"<button+onClick=\"document.bgColor+=+\'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>|354695|​|354696|这样你就可以在新内容中编写javascript脚本了。不过，别忘了转义所有的双引号和单引号，否则它不会起作用。javascript中的转义可以通过遍历代码并在所有单引号和双引号前面加一个反斜杠来完成。|354697|请记住，像php这样的服务器端脚本不是以这种方式工作的。由于PHP是服务器端脚本，因此必须在加载页面之前对其进行处理。Javascript是一种工作在客户端的语言，因此不能激活php代码的再处理。|354698|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>Can't you just try to replace the body content with the document.body handler?</p>

<p>if your page is this:</p>

<pre><code>&lt;html&gt;
&lt;body&gt;
blablabla
&lt;script type="text/javascript"&gt;
document.body.innerHTML="hi!";
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Just use the document.body to replace the body.</p>

<p>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.</p>

<p>An example with javascript scripting inside it:</p>

<pre><code>&lt;html&gt;
&lt;body&gt;
blablabla
&lt;script type="text/javascript"&gt;
var changeme = "&lt;button onClick=\"document.bgColor = \'#000000\'\"&gt;click&lt;/button&gt;";
document.body.innerHTML=changeme;
&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>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.</p>

<p>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.</p>


blocks|key|350945|text|我假设你使用的是jQuery或类似的东西。如果您使用的是jQuery，则应执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350946|<html>
<head>
+++<script+src="jquery.js"+type="text/javascript"></script>
</head>
<body>
+++content
</body>
<script+type="text/javascript">
+++$("body").load(url);
</script>
</html>|code-block|syntax|javascript|350947|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'm assuming you are using jQuery or something similar. If you are using jQuery, then the following should work:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
   &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   content
&lt;/body&gt;
&lt;script type="text/javascript"&gt;
   $("body").load(url);
&lt;/script&gt;
&lt;/html&gt;
</code></pre>


<p>I have an HTML page with a typical structure:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
   &lt;script src="..." &gt;&lt;/script&gt;
   &lt;style&gt;...&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   content
  &lt;/body&gt;
  &lt;script&gt;
    var success_callback = function(data) {
      // REPLACE PAGE CONTENT &amp; STRUCTURE WITH "data"
    }
    ajax(url, params, success_callback);
  &lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p>Do you think it is possible ?  I've already tried to give the html tag an id and doing <code>$(id).replace(data);</code> with no success.</p>

<p>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).</p>

<p><strong>EDIT</strong> : I forgot to say that <strong>scripts in the received content have to be executed</strong>, even external scripts included using <code>&lt;script src="..."&gt;</code>.</p>


Replace HTML page with contents retrieved via AJAX

服务器

jQuery

我有一个具有典型结构的HTML页面：<html>  <head>   <script src="..." ></script>   <style>...</style>  </head>  <body>   content  </body>  <script>    var success_callback = function(data) {      // REPLACE PAGE CONTE

问用通过AJAX检索的内容替换HTML页面
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用通过AJAX检索的内容替换HTML页面EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用通过AJAX检索的内容替换HTML页面
EN