Load pages via AJAX and execute javascript and CSS

Question

I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.

Mostly I just end up with the plain text without any CSS. Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.

you can do it by jQuery.get, jQuery.load and jQuery.ajax. where is your code? — chhameed
– chhameed, Commented Sep 5, 2012 at 6:26

Alfred · Accepted Answer · 2012-09-05 07:29:03Z

3

I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;

$('<iframe src="your_page.html"/>').appendTo('#your_div');

Or you may try something like;

$('<iframe src="your_page.html"/>').load(function(){
      alert('the iframe is done loading');
}).appendTo('#your_div');

edited Sep 5, 2012 at 7:29

answered Sep 5, 2012 at 7:13

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

woutr_be Over a year ago

But there is no way of loading the page dynamically into the iframe is there? I need to add some effects, with this solution I don't know if the page is loaded or not

Alfred Over a year ago

You may dynamically create iframe with jQuery. Check jquery-howto.blogspot.in/2010/02/…

simekadam · Accepted Answer · 2012-09-05 07:08:54Z

2

I have solved similar problem as following.

Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage

Another thing is you will need to somehow call the script.. I have done it this way:

I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.

I must say this is awful solution, which likely means you have bad application architecture so as I have had:)

With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.

edited Sep 5, 2012 at 7:08

answered Sep 5, 2012 at 6:37

simekadam

7,40411 gold badges61 silver badges81 bronze badges

1 Comment

woutr_be Over a year ago

Very good explanation, the problem is that it's a fully existing website, so it's rather hard to change the entire structure for this, I will try your solution.

Winfield Trail · Accepted Answer · 2012-09-05 07:35:33Z

If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.

Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.

What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:

Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!

Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.

It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.

Community · Accepted Answer · 2017-05-23 12:05:41Z

0

I suppose you are looking for something like this:

your page div --> load --> www.some-site.com

After a quik search the closest solution seems to be the one by "And": Load website into DIV

You have to run a web server and create a proxy.php page with this content:

Then your JQuery load() function should be like this:

$("#your_div_id").load("proxy.php?url=http://some-site.com");

NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.

Anyway I hope this could be a step forward to your solution.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Sep 5, 2012 at 8:03

Mave751

7074 gold badges11 silver badges25 bronze badges

Comments

Arslan · Accepted Answer · 2019-01-07 14:07:24Z

0

Get your entire webpage as text using ajax
document.open(); document.write(this.responseText); document.close();

OR

document.documentElement.outerHTML = this.responseText;

But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.

edited Jan 7, 2019 at 14:07

answered Jan 7, 2019 at 14:01

Arslan

14 bronze badges

Collectives™ on Stack Overflow

Load pages via AJAX and execute javascript and CSS

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related