CODEWITHSUNDEEP
javascriptjqueryiframe
otinanai
otinanai

Reputation: 4023

Change background image of an iframe body with Jquery if certain URL

I use the following jQuery script to read the page URL and according to this I change the background image:

Sort version of my script:

var url = window.location.href;
if (url.search("food") > 0){
    alert('Example: use image 1');
} else {
    alert('Example: use image 2');
}

This script works well when the page loads independent. However, it's not working when the page is called from an iframe, meaning that the script cannot read parent's window URL. Is there any way to get the URL of the parent window from the page that's called in the iframe? I hope it makes sense.

--EDIT--

I have full control of both pages: The page with the iframe and the page that's been called in the iframe. Maybe an alternative would be to have a script in the parent page that changes the background image of the iframe page.

--SOLUTION--

parent.document.location.href did the trick and since my iframe is in the same domain but in different subdomain I had to declare also: document.domain = "myurl.com". So my final script now is:

document.domain = "mydomain.com";
var url = parent.document.location.href;
if (url.search("food") > 0){
    alert('Example: use image 1');
} else {
    alert('Example: use image 2');
}

Upvotes: 0

Views: 982

Answers (2)

couzzi
couzzi

Reputation: 6366

OP,

This solution uses jQuery to access the (same domain) iframe's content/apply css styling.

Upvotes: 1

Rob Grzyb
Rob Grzyb

Reputation: 785

Try using window.parent.location.href from the iframe. This can work as long as both the iframe and parent are on the same domain.

Also, see this related post: Access parent URL from iframe

Upvotes: 1

Related Questions