推迟广告脚本执行

时间:2017-01-27 11:00:07

标签: javascript php

借助以下php功能:

  <?php
  if (!function_exists('wrapAds')) {
    function wrapAds($current_banner_name){
      $STRING_EMPTY = "";
      $openExprResult = array();
      $closeExpreResult = array();
      $openExpr = "/(<div[^>]*>)/";
      $closeExpr = "/(<\/div>)/";

      $banner = tsp_get_banner($current_banner_name);
      $result = '<pre data-script-reference>'
                .htmlspecialchars($banner)
                .'</pre>';

     return $result;
    }
  }
?>

我正在呈现以下markup

<pre data-script-reference="1">&lt;!--- s: middle-box-sidebar --&gt;
&lt;div class="ads middle-box-sidebar"&gt;&lt;script type="text/javascript"&gt;
var FW_type = "4w";
var FW_code = "18xxxx;95xxx;70xxx;0";
var FW_dimension = "300x250";
var FW_category = "gossip";
&lt;/script&gt;
&lt;script src="//optimized-by.4wnetwork.com/simply_loader.js?4wvideo=true" type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;
&lt;!--- e: middle-box-sidebar --&gt;</pre>

现在我要推迟使用以下脚本推迟编码脚本执行:

    <script type="text/javascript">
        [].slice.call(document.querySelectorAll('pre[data-script-reference]'))
   .forEach(function(item){
         var txt = document.createElement("textarea");
         txt.innerHTML = item.innerHTML;
         var parentNode = item.parentNode;
         var p0 = txt.innerText;
        //  parentNode.removeChild(item);
         parentNode.innerHTML += p0;

    </script>

似乎根本没有执行解码后的脚本,我做错了什么?

1 个答案:

答案 0 :(得分:1)

在执行了一万亿次无用的代码之后,我在一长串警告中注意到了一个奇怪的声明:
“无法在'Document'上执行'write':除非明确打开,否则无法从异步加载的外部脚本写入文档。”。我用Google搜索了这条消息,发现了nice question

唯一未接受的答案建议postscribe.js

        

异步编写javascript,即使是document.write。   

<小时/>   远程脚本(尤其是广告)阻止页面执行任何操作   否则他们加载。它们对加载时间的贡献很大   影响你的底线。异步广告不会阻止该页面   可以在核心内容之后交付 - Async FTW。

     

为什么异步投放广告太难了?因为他们可能   包含对document.write的调用,希望对其进行处理   同步。 PostScribe可让您投放同步广告   异步,无需修改广告代码。

因此,由于我必须在正文和侧边栏中管理广告,我进行了一些重构,在函数中移动 php 函数.PHP

/**
* redefine and get the legacy ads block from base library by name
* render as encoded plain text inside a *pre* wrapper
*/
function tsp_get_banner($current_banner_name){
  $STRING_EMPTY = "";
  // https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
  $openExpr = "/(<div[^>]*>)/";
  $closeExpr = "/(<\/div>)/";
  $openExprResult = $closeExpreResult = array();
  $banner = original_tsp_get_banner($current_banner_name);
  preg_match($openExpr, $banner, $openExprResult);
  $banner = preg_replace($openExpr, $STRING_EMPTY, $banner);
  preg_match($closeExpr, $banner, $closeExpreResult);
  $banner = preg_replace($closeExpr, $STRING_EMPTY, $banner);
  return wrapAdsSnippet($banner, $openExprResult[0], $closeExpreResult[0]);
}

function wrapAdsSnippet($source, $prefix, $postfix){
  $result = '<pre data-script-reference style="display:none;">'
                            .htmlspecialchars($source)
                        .'</pre>';
  if(isset($prefix) && isset($postfix)){
        $result = $prefix.$result.$postfix;
    }
  return $result;
}

然后我更改了块的包含: 所以我不需要改变任何东西。

<?php

echo tsp_get_banner(“middle-box-sidebar”);

  echo renderAds("middle-box-sidebar");
?>

我只需更改最终脚本以包含在 footer.php 中:

var MyCompanyLab;
(function (MyCompanyLab) {
    "use strict";
    var Ads;
    (function (Ads) {
        var Optimization;
        (function (Optimization) {
            var PostProcessor = (function () {
                function PostProcessor() {
                }
                PostProcessor.postponeAdsExecution = function () {
                    $("pre[data-script-reference]").each(function (idx, item) {
                        var parentNode = item.parentNode;
                        postscribe(parentNode, $('<textarea />').html(item.innerHTML).text(), {
                            done: function () { },
                            error: function () { },
                            releaseAsync: true,
                        });
                        parentNode.removeChild(item);
                    });
                };
                return PostProcessor;
            }());
            Optimization.PostProcessor = PostProcessor;
        })(Optimization = Ads.Optimization || (Ads.Optimization = {}));
    })(Ads = MyCompanyLab.Ads || (MyCompanyLab.Ads = {}));
})(MyCompanyLab|| (MyCompanyLab= {}));


<script type="text/javascript">
  ...
  MyCompanyLab.Ads.Optimization.PostProcessor.postponeAdsExecution();
  ...
</script>