javascript - 如何根据窗口的顶部 URL 更改 iframe 内的 Logo

Question

我从早上就开始尝试解决这个问题。我希望带有 iframe 的图像文件( Logo )根据某些 URL 进行更改。也就是说，当 iframe 嵌入到特定域内时，有一个内部 Logo ，而当它嵌入到域外部时，则有一个外部 Logo 。但我不断收到此错误安全错误:阻止具有来源的框架访问具有来源协议(protocol)、域和端口必须匹配的框架。我不知道如何解决此问题？有其他方法可以做到这一点吗？

这是我的代码

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>

Answer 1

除非 iframe 及其父级位于同一域中，或者 the parent domain allows the child one to access it ，否则您不能使用 window.parent 。仅当您可以控制父服务器时，这才可行。不过，有一个解决方法:

替换

var currentUrl = window.parent.location.hostname;

与

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)