Question

我正试图从早上起就解决这个问题。我希望带有iframe的图像文件（徽标）根据特定网址进行更改。也就是说，当iframe嵌入特定域内时，会有一个内部徽标，当它嵌入域外时，会有徽标外部。但我继续收到此错误 SecurityError：阻止一个原始框架来访问一个原始协议，域和端口必须匹配的框架。我不知道如何解决这个问题？有没有其他方法可以做到这一点？

这是我的代码

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)

如何根据窗口的顶部网址更改iframe中的徽标

1 个答案: