css linking in html content throws get error on loading html

Question

I have a problem with jQuery's .html() method. I load a html content into a div by using this:

$('#content').html(domContent);

where domContent is containing a entire HTML string. It has a stylesheet linked to it. So while this line executes am getting GET file:///.... error in the console, because the URL path of CSS file is not valid.

However later I modify the URL and get it to apply it on my page.

But I don't want this error to occur in the first place. It should ignore it or if any way I can tell jQuery to skip this GET error.

Answer 1

You can use $(document.createDocumentFragment()); in this instance. As it suggests, it creates a document fragment, but doesn't add it into the page, so won't try to fetch the CSS from the broken URL. For example:

var $fragment = $(document.createDocumentFragment());
$fragment.html(domContent);

// Fix the CSS URL using the code you've already got, then:

$('#content').html($fragment.html());

If your unsure how the 'fix CSS URL' code you've got will work with this, just post the code and I'll help out.