如果您检查了该 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 或角度填充内容，请查看下面的 jQuery 示例
我还需要krux/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>
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，但调整角度版本很容易，我建议你将其作为家庭作业来实现 =)