jQuery .load() XHTML issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-17 18:18 出处：网络

I am having some strange problems loading content from another XHTML page via jQuery. When the second page I try to load from is served as XHTML I get the below error. I don\'t know if it helps but bo

I am having some strange problems loading content from another XHTML page via jQuery. When the second page I try to load from is served as XHTML I get the below error. I don't know if it helps but both documents validate when I get the error.

Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

Currently the header on the second page I load from is:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:la开发者_高级运维ng="en">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta name="language" content="en" />  
 <title>some title</title>
 <!-- CSS & Javascript included here -->
</head>

The content type is set as:

application/xhtml+xml;charset=iso-8859-1

Interestingly, when I remove all the XHTML stuff from the header and stop setting the content type the error does not occur and everything works great.

The load process currently looks like the below. It works fine when everything is plain HTML.

$('#overpage').find(".wrap").load(this.getTrigger().attr("href")+" #op").show();

I'm curious why the process only does not work when the second page I load from is XHTML. I don't want to serve the page as just plain HTML and am looking for advice on what I am doing wrong. Both pages validate and I'm really scratching my head here. Many thanks!

I think this is related to the fact that document.write does not work with XHTML strict:

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

I ran into the same issue a bit back, I think it's caused because jquery takes the (X)HTML it gets, inserts it into a dummy div, and only then runs the selector (#op in your case) to retrieve the correct part and insert that into the final place. Here's the relevant jquery code (taken from 1.5.1, but 1.6 looks identical):

jQuery("<div>")
    // inject the contents of the document in, removing the scripts
    // to avoid any 'Permission Denied' errors in IE
    .append(responseText.replace(rscript, ""))

    // Locate the specified elements
    .find(selector)

In Firebug, I can see that it errors out on the .append line, because it doesn't grok a <?xml or <DOCTYPE header inside a div... So I guess this is just something jquery doesn't support, not sure how this could be fixed in a sane manner.

XHTML does not support document.write or innerHTML. Due to the fact, that jQuery inserts the new code using one of these methods, all XHTML compatible browsers will error out.

XHTML with application/xhtml+xml does not support raw modification of the source using any of these jQuery methods: append(), html(), insert...(), etc.

Instead, query for some JSON data and insert the AJAX-received values into either pre-defined tags using .text() / .val() or dynamically create those nodes using document.createElement('someTag').