Using jQuery load function as an absolute path

Question

I have several pages and these pages can be accessed either directly, or from an iFrame. The part where the page can be loaded as an iFrame is used for some functionality that I need.

The problem is, that when I use the .load() function in jQuery, the stylesheets, scripts, some images, etc are not being found because the .load() tries to load everything as a relative path from where it is called.

I need to load the pages in the iFrame kind of like a snapshot, which means that they should behave the same way as if they were accessed directly.

Trying to summarize, this is the problem:

The file is located as follows:

http://localhost/www/folders/myfolder/myfile.html

The index file from where the .load() function is called is in the root, i.e.

http://localhost/www/index.php

myfile.html contains links like:

css/style.css
js/script.js

There, these are located at:

http://localhost/www/folders/myfolder/css
http://localhost/www/folders/myfolder/js

Therefore, when the .load() function loads the file from the root folder, these are not found because they are read as follows:

http://localhost/css/ instead of http://localhost/folders/myfolder/css

How can I get around this?

Many thanks

Do you include CSS and JS files in the head section of myfile.html? — Salman Arshad
– Salman Arshad, Commented Mar 29, 2011 at 10:14

Caspar Kleijne · Accepted Answer · 2011-03-29 10:23:25Z

2

you could add a base tag to your loaded page with jQuery

      $("head").append("<base href="http://localhost/folders/myfolder/" />");

depending on the loading order you should play with this. (I am not sure if the css needs to be loaded BEFORE or AFTER this has been set)

answered Mar 29, 2011 at 10:23

Caspar Kleijne

21.9k13 gold badges74 silver badges102 bronze badges

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

2 Comments

seedg Over a year ago

This worked. However it works once every two clicks. For some reason, when I click to load the iFrame again, the stylesheets and scripts disappears.

seedg Over a year ago

It also appears that it is not working in Firefox. It is working fine in Chrome

Poonam · Accepted Answer · 2011-03-29 10:19:15Z

0

I think you can try this,

<?php
define('file_path_css','folder/myfolder/css');

include file_path_css;

?>

this might work..

answered Mar 29, 2011 at 10:19

Poonam

4,6411 gold badge17 silver badges20 bronze badges

Comments

mike · Accepted Answer · 2011-03-29 10:29:26Z

0

Sounds like in your myfile.html, you just need to add "folder/myfolder/" to your stylesheet and script paths.

answered Mar 29, 2011 at 10:29

mike

3021 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using jQuery load function as an absolute path

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related