如果您检查了该 url 请求的结果（确保 adBlock 已关闭）
https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c=
你会看到实际的结果
document.write('<script type="text/javascript" src="//wlbetclic.eacdn.com/TrafficOpt/s.5.4.min.js?t=1"></script>');
document.write('<script type="text/javascript" src="//wlbetclic.eacdn.com/wlbetclic/img/js/Affiliate_12824.js?t=20160224"></script>');
//other lines omitted for brevity
所以这个文件正在执行document.write显然这在角度上不起作用，只是因为它们完全不同（即使您可以以某种方式触发摘要循环，您仍然无权修改该脚本文件，因为它是由第 3 方服务器生成并具有自己的变量）
我要做的是 - 制作一个像 ad.html 的页面，就像 index.html 或 404.html 一样，然后从角度（不是作为模板，而是像视图文件）请求这个文件作为具有自定义属性的 iframe src
我将使用自定义 DOM 元素，并使用 jQuery 或 Angular 填充内容，请查看下面的 jQuery 示例
我还需要克鲁克斯/postscribe插件，因为你不能在异步 html 文件中使用 document.write
<!-- create multiple holders -->
<ad-holder url="https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c="></ad-holder>
<div class="black-widow">
<!-- with size attributes -->
<ad-holder url="http://google.com" width="100" height="40"></ad-holder>
</div>
<!-- jQuery population with iframe -->
<script>
//get all custom elements
$('ad-holder').each(function(){
//create iframe placeholder
var $iframe = $(document.createElement('iframe'));
//get url of custom element
var url = $(this).attr('url');
//request ad.html file with params, currently it's url param
$iframe.attr('src', 'ad.html?url=' + url);
//some stylings acceptable here
$iframe.width('100px');
//or get styles from custom-element
var heightValue = $(this).attr('height');
$iframe.height(heightValue || '50px');
//rebuild custom element with iframe
$(this).append($iframe);
});
</script>
<!-- angular populate with iframe directive -->
<scrip>
angular.module('app', []).directive('adHolder', function(){
return {
restrict: 'E',
scope: { url: '@' },
//you could also execute in compile-phase
link: function(scope, element, attribute){
var $iframe = angular.element(document.createElement('iframe'));
$iframe.attr('src', 'ad.html?url=' + scope.url);
element.html($iframe);
}
}
});
</script>
And ad.html看起来像
<body>
<div id="ad"></div>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
//for the sake of simplicity we expect only 1 param (url)
return query.replace('url=', '');
}
var adUrl = getQueryVariable('url');
if (adUrl)
postscribe('#ad', '<script src="' + adUrl + '"><\/script>');
else {
var $h1 = $(document.createElement('h1'));
$h1.text('No ad available');
$(document.body).append($h1);
}
</script>
</body>
该解决方案最好的部分是您可以将相同的自定义元素与不同的元素重复使用url任何其他广告的属性
查看 jQuery 实际工作演示
虽然这个演示大量使用了 jQuery，但很容易调整角度版本，我建议你将其作为家庭作业来实现 =)
