0

I have tried for a while and i don't know if it's my search skills, if no one has asked the question before or if it's even possible.

Currently i am loading a file using .load('path/to/file.php'); but the file i am loading inherits all the styling from the site its loaded to.

Is it possible to load the file without adapting the styling from the site it's being loaded into?

There are no options in the .load() api that mentions this problem, and i do imagine that in most cases it's not an issue. My options are to re-declare every style element for the included file, which is a major task and seems quite unnecessary for this situation.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • 1
    Well thats a normal behavior. Load is used to `load` partial content instead of refreshing the whole page. The content you load should not be seen as something independent but as a part of the page you load to (with its styling). – t.niese Aug 30 '13 at 11:59

2 Answers2

1

Your problem may have an easy solution. Load the content into an iframe which I think will isolate it from the rest of the page with respect to CSS styling.

Read the following: How to apply CSS to iframe?

Most people have the opposite problem, they want to apply the parent styling to the content within the iframe, and you want to do the inverse.

In this case, you may not need to even use AJAX or jQuery load(), just link to your file using the src attribute in the iframe.

Comment

What you have here is a case of embedded content, which is discussed in the HTML5 specification under the iframe tag section. Using the ifrmae tag in this application is very appropriate.

Reference: http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element

Community
  • 1
  • 1
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • Thank you. iframe solved my issue, while it's a dirty solution then it works surprisingly well in the situation i need it. –  Aug 30 '13 at 12:12
  • NO!!! not dirty, elegant! This is what you needed for this problem. Have faith in the spec! – Marc Audet Aug 30 '13 at 12:14
1

CSS will always be applied to the whole page (according to selectors of course). The only way to do what you ask is by using an iframe in which you will be loading the ajax page this way it will be independent.

Another way that COULD work is by resetting the whole CSS definitions in the container but that is error prone.

Salketer
  • 14,263
  • 2
  • 30
  • 58