Question

我试图解决广告皮肤问题。

我有一个网站，其中包含固定标题栏的滚动条，我还有一个广告皮肤，当副本存在时设置了一个上限。

要加载皮肤，我使用带有google dfp的javascript作为广告服务器。 javascript代码是这样的，但是要在我的页面中嵌入adv，Google DFP使用iframe，所以在我的网页中，我在iframe的头部有一个带有此代码的iframe。

iframe查找父窗口并更改我网站的属性。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var parent = $(window.parent.document);
var parent_body = parent.find('body');
var parent_pad = parent.find('.padded-container');
parent_body.css("backgroundImage", "url('%%VIEW_URL_UNESC%%%%FILE:JPG1%%')")
           .css("backgroundPosition", "top center")
           .css("backgroundRepeat", "no-repeat")
           .css("backgroundAttachment", "fixed")
           .css("margin-top", 100);
parent_pad.before('<a id="sitewrap" href="%%CLICK_URL_ESC%%%%DEST_URL%%" target="_blank" style="display:block;position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer"></a>');
});
</script>

一切正常，当我的网站加载iframe时，嵌入式iframe标题中的js代码会更改我网站的css属性并显示皮肤。

问题是我网站的导航栏，在iframe之前加载了粘性导航。这是调用代码。

stickyNavigation : function stickyNavigation() {

            if ($(window).scrollTop() > navTop) {
                $container.addClass('fixed-nav');
            } else {
                $container.removeClass('fixed-nav');
            }
        },

其中

$nav = $('.site-nav');
navTop = $nav.offset().top;

iframe在页面后加载，因此$nav.offset().top值并不考虑100px的边距。

如果我在浏览器控制台window.headerManager.init();中编写，我可以在加载外观时重新初始化脚本，但当然我需要在我加载到我的广告服务器上的js代码中添加window.headerManager.init();，并从iframe head我无法调用window.headerManager.init();，因为window是iframe的窗口，我需要捕获父窗口。

我该如何解决这个问题？

更新

Answer 1

我发现通过postMessage，iframe与父页面的通信通常更容易。您可以在父页面中设置一个监听器，以便在iframe发布时，您可以重新启动方法。

从iframe重新初始化javascript函数

1 个答案: