how to change logo within an iframe depending on top URL of the window

Question

I am trying to solve this problem since morning now. I want the an image file (logo) with an iframe to change depending on certain URLs. That is when the iframe is embedded inside a specific domain there is an internal logo and when it is embedded outside of the domain there is logo external. But I keep on getting this error SecurityError: Blocked a frame with origin from accessing a frame with origin Protocols, domains, and ports must match. I dont know how can I work around this? Is there an alternative way to do this?

here is my code

jQuery(document).ready(function($){
  var currentUrl = window.parent.location.hostname;
  if (currentUrl == 'www.mysite.com' || currentUrl == 'www.specific.com') {
    $(function() {
        $('img').remove('.logo-external');
    });
} else {
  $(function() {
        $('img').remove('.logo-internal');
    });
}
});

<div class="footer-right">
        <a class="logo" href="" target="_blank">
            <img class='logo-external' src="{{ ASSET_PATH }}logo-external.jpg" height="18" />
            <img class='logo-internal' src="{{ ASSET_PATH }}logo.png" height="18" />
        </a>
    </div>

I am not sure if I understand your answer correctly. But I do not want to change attribute. Since this is for an app that will export iframes which will then be embedded by users into their websites. So my only option is to change it from the template it self. — Imo, Aug 18 '15 at 21:47
You can't use `window.parent` unless the iframe and its parent are on the same domain, or if [the parent domain allows the child one to access it](http://stackoverflow.com/questions/13421463/htaccess-access-control-allow-origin). That is only feasible if you have control over the parent server. @MarcB gave a workaround you can use, to _flag_ any internal request, but that requires you to have a different iframe URL than your other clients. — blex, Aug 18 '15 at 21:50
is there an alternative method to window.parent to achieve this result? — Imo, Aug 18 '15 at 21:56

score 1 · Accepted Answer · edited May 23 '17 at 12:22

You can't use window.parent unless the iframe and its parent are on the same domain, or if the parent domain allows the child one to access it. That is only feasible if you have control over the parent server. However, there is a workaround:

Replace

var currentUrl = window.parent.location.hostname;

with

var temp = document.createElement("a");
temp.href = document.referrer;
var currentUrl = temp.hostname;

JS Fiddle demo using window.parent (not working)

JS Fiddle demo using document.referrer (does work)

how to change logo within an iframe depending on top URL of the window

1 Answers1