JQuery asynchronous load only part of the document

StackOverflow https://stackoverflow.com/questions/21280628

  •  01-10-2022
  •  | 
  •  

문제

I'm developing a page that load some content into divs.

I'm using 

$("#divid").load("page.php");

This page contains CSS aswell.

The problem comes when I try to inspect the content with firebug, it appears that the same css rule is applied multiple times.

Is that an error of my code or is someting "expected" to be when using jquery?

Can I load only a part of the code?

도움이 되었습니까?

해결책

It is supposed to work like that. Basically the .load() method will parse the HTML and insert it into the div.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

The easiest way to fix your problem is this:

$('#divURLContent').load('page.php body');

which will load only the "body" part of page.php. In general, you should not load an entire page inside a div, but just pieces of code.

Have a look here for further reference: Jquery to load a page overrides my CSS

다른 팁

Yes, if you've loaded an HTML page with CSS styles inside then these styles will be included in your current pages as well.

I suggest you to have external css files instead of embedded styles like you're currently doing

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top