开发者

How do I preserve html as is when using Javascript's innerHTML

everything is working fine, decodeURIComponent(xmlhttp.responseText) comes back as html from parsing script as checked with alert, no errors in the console, but replacing the html to the editor with

retHTML.innerHTML =decodeURIComponent(开发者_运维问答xmlhttp.responseText);

seems to have a "feature" of translating my html to encoded html(& to &) etc.. I'm not sure why a command that says it is the inner html would prevent you from actually using html? innerText simply amplifies this rather then returning the html free text as implied. How do I get the returned html back to the div as the html I am requesting?

function setHTML(retHTML)
{
retHTML.innerText =retHTML.innerHTML; }

function setTEXT(retHTML)
{
var tmpTXT =encodeURIComponent(retHTML.innerText);
var xmlhttp;
xmlhttp=new XMLHttpRequest(); 
xmlhttp.onreadystatechange=function()
{ retHTML.innerHTML =decodeURIComponent(xmlhttp.responseText);  }
xmlhttp.open("POST","path.php",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send('send=' + tmpTXT); }

test markup as follows

<object width="853" height="510">
<param name="movie" value="http://www.youtube.com/v/iaysTVcounI?version=3&amp;hl=en_US&amp;rel=0">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/iaysTVcounI?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1" type="application/x-shockwave-flash" width="853" height="510" allowscriptaccess="always" allowfullscreen="true">
</object> 

should be

<object width="853" height="510">
<param name="movie" value="http://www.youtube.com/v/iaysTVcounI?version=3&hl=en_US&rel=0">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/iaysTVcounI?version=3&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" width="853" height="510" allowscriptaccess="always" allowfullscreen="true">
</object>


innerHTML is a parser when you write to it and a serialiser when you read, not a simple property that stores text.

When you write to innerHTML, it converts the HTML source text into DOM objects like Element, Attr and TextNode. It is these DOM objects that reflect the real live state of the document in the browser window, and not anything that looks like HTML source.

On writing, any information that is not significant to the ‘information set’ stored in the DOM is lost. This includes things like case (whether your tag was <b> or <B>), order of attributes, whitespace inside tags, entity and character references (ie whether you said café, caf&#233; or caf&eacute;—it's all the same to an HTML parser), and much more.

Reading back the innerHTML you just wrote will re-serialise the parsed DOM and give you something back that won't necessarily be the same string as what you put in. If you made mistakes in your original HTML, you'll also find that the output has been corrected to reflect what the HTML parser did to be able to read what you put in. So an invalid bare ampersand will necessarily turn into &amp;.

(I'm not sure what kind of ‘editor’ you're referring to, but if it's a <textarea> then that will additionally fix up < to &lt; in any HTML you write to it, because a textarea can't contain markup. It's also rather odd and unnecessary that you would be passing back URL-encoded data in a responseText; are you sure that's what's happening?)

ETA:

should be value="http://www.youtube.com/v/iaysTVcounI?version=3&hl=en_US&rel=0"

No it shouldn't. That's not valid HTML. Escaping the &s to &amp; is absolutely the correct, required thing to do.


I feel this is kinda ghetto but ultimately the following will be my fix. I recomend this as an alternative to innerHTML for literal replacement of the string.

retHTML.innerHTML ='';  
retHTML.execCommand('insertHTML',false,xmlhttp.responseText);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜