Google DFP Refresh Ads 删除了 Internet Explorer 10 中的 window.history 堆栈

Posted 2023-03-08

【中文标题】Google DFP Refresh Ads 删除了 Internet Explorer 10 中的 window.history 堆栈

【英文标题】：Google DFP Refresh Ads removes window.history stack in Internet Explorer 10

【发布时间】：2013-05-15 23:26:12

【问题描述】：

我目前是一个使用 pushstate 进行页面转换的网站的开发人员。

该网站使用 Google DFP 广告，它在每个页面转换/路线上刷新

我注意到 Internet Explorer 出现问题

我使用的是 Windows 7、IE10。

googletag.pubads().refresh(GOOGLE_ADS);

将删除 window.history 堆栈上的条目，从而导致使用后退按钮的条目不正确。

快速示例

将条目添加到历史堆栈

console.log(window.history.length) // 3

window.history.pushState(, 'title', '/page_1'); window.history.pushState(, 'title', '/page_2'); window.history.pushState(, 'title', '/page_3'); window.history.pushState(, 'title', '/page_4');

console.log(window.history.length) // 7

刷新广告

googletag.pubads().refresh(GOOGLE_ADS);

再次检查历史长度

console.log(window.history.length) // 3

如果我按下后退按钮，它将转到着陆页之前的页面。

还有其他人在 IE 中注意到这个问题吗？ 查看 DFP 源代码，它多次引用 window.history。

【参考方案1】：

我遇到了完全相同的问题，即使在具有不同域的 iframe 中运行广告仍然会导致历史记录丢失。我相信这与 IE 将 iframe src 更改作为历史事件处理有关，但基本上使用谷歌广告完全破坏了 IE 中的 pushstate。我发现解决的唯一方法是不使用 Google 广告。

【讨论】：

是的，奇怪的是如何解决这个问题。我们现在根本不刷新 IE 中的广告。

【参考方案2】：

我们遇到了完全相同的问题。在 IE10 和 IE11 中，如果您使用的是 DFP，则 pushstate 几乎没用。

但是，我们确实想出了一个解决方案。它不漂亮，但它有效。

我们插入一个 iframe，而不是加载广告。在该 iframe 中，广告照常加载。但是，不能在该 iframe 中使用 refresh() 方法，仍然会出现同样的问题。但是当广告加载到 iframe 中时，您可以做的是刷新整个 iframe。通过这样做，广告将被刷新，并且 pushstate 功能将保持不变。

非常讨厌，但它有效。由于几个原因在 iframe 中加载广告不好，我们只在 IE10 和 IE11 中这样做。

【参考方案3】：

我在使用 IE10 和 IE11 时遇到了同样的问题 - 非常令人失望。

为了它的价值，我向微软提出了一个错误，可以在这里看到：

https://connect.microsoft.com/IE/feedbackdetail/view/979564/ie-pushstate-history-is-corrupted-by-google-adsense-google-dpf-doubleclick-for-publishers-advertising

如果您有时间，请添加您对错误的关注，以使其更加重视有希望的修复。

亚当

【讨论】：

MS 团队回复要求 PoC，您能否回复他们？此后没有采取进一步行动。

【参考方案4】：

正如我在 DFP 帮助论坛上发布的那样：https://productforums.google.com/forum/#!topic/dfp/9BsgVtKTU9A

我有工作解决方案，我使用 jQuery。

if(typeof googletag !== 'undefined' && typeof googletag.pubads !== 'undefined') 
   if(adsCloned === false) 
      var $dfpIframe = $('#div-gpt-ad-1477269112222-0').find('iframe'); // this is ad id that you use in googletag.defineSlot()

      $dfpIframe.each(function (i, v) 
         var $clone = $(v).clone();
         $(v).replaceWith($clone);
      );
      adsCloned = true;
   
   googletag.pubads().refresh();

在此之前你必须定义var adsCloned = false; 它起作用的原因是，当您刷新页面加载后插入的 iframe（在本例中为克隆 iframe）时，历史记录条目不会添加到 IE。

编辑： 如果它对您不起作用，请尝试删除 if statememt：

if(typeof googletag !== 'undefined' && typeof googletag.pubads !== 'undefined') 
       var $dfpIframe = $('#div-gpt-ad-1477269112222-0').find('iframe'); // this is ad id that you use in googletag.defineSlot()

       $dfpIframe.each(function (i, v) 
          var $clone = $(v).clone();
          $(v).replaceWith($clone);
       );
       googletag.pubads().refresh();
    

上面的代码不起作用 - 我的错误。 但对我来说可行的解决方案是销毁整个 googletag 变量并再次调用整个代码。

dfp 脚本的第一次调用如下所示（注意 googletag.pubads().disableInitialLoad(); 和 gads.id = 'dfpHeadScript';）：

// Doubleclick
var googletag = googletag || ;
googletag.cmd = googletag.cmd || [];
(function() 
    var gads = document.createElement('script');
    gads.async = true;
    gads.id = 'dfpHeadScript';
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
)();

googletag.cmd.push(function() 
    enovatis.dfpSlots.push( googletag.defineSlot('...', [240, 400], 'div-gpt-ad-1').addService(googletag.pubads()) );
    enovatis.dfpSlots.push( googletag.defineSlot('...', [[960, 100], [750, 100]], 'div-gpt-ad-2').addService(googletag.pubads()) );

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.pubads().disableInitialLoad();
    googletag.enableServices();
);

googletag.cmd.push(function()
    googletag.pubads().refresh();
);

而刷新广告的方法是：

var dfpInterval = null;
var $dfpTop = $('#div-gpt-ad-1');
var $dfpLeft = $('#div-gpt-ad-2');

function refreshDfp() 

    $dfpTop.empty();
    $dfpLeft.empty();

    googletag =  ;
    googletag.cmd = [];

    $('#dfpHeadScript').remove();

    (function() 
        var gads = document.createElement('script');
        gads.async = true;
        gads.id = 'dfpHeadScript';
        gads.type = 'text/javascript';
        var useSSL = 'https:' == document.location.protocol;
        gads.src = (useSSL ? 'https:' : 'http:') +
            '//www.googletagservices.com/tag/js/gpt.js';
        var node = document.getElementsByTagName('script')[0];
        node.parentNode.insertBefore(gads, node);
    )();

    googletag.cmd.push(function() 
        enovatis.dfpSlots.push( googletag.defineSlot('...', [240, 400], 'div-gpt-ad-1').addService(googletag.pubads()) );
        enovatis.dfpSlots.push( googletag.defineSlot('...', [[960, 100], [750, 100]], 'div-gpt-ad-2').addService(googletag.pubads()) );
        googletag.pubads().enableSingleRequest();
        googletag.pubads().collapseEmptyDivs();
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();

        window.clearInterval(dfpInterval);
        dfpInterval = window.setInterval(function()
            if(typeof googletag.pubads !== 'undefined')
                window.setTimeout(function()
                    googletag.pubads().refresh();
                , 75);
                window.clearInterval(dfpInterval);
            
        , 75);
    );

我称之为：refreshDfp.apply(window);，一切正常。 这种方法的唯一缺点是我们每次都向 google 发送更多请求。