Kun*_*gen 7 javascript ads angularjs angular-template
我正在尝试在我的Angular模板中呈现Javascript广告,但它不会显示.当我们将Javascript附加到head标签时我找到了一些解决方案,但我希望将广告放在我的Html(body body)中.
这是一个Plunker:https://plnkr.co/edit/WHhQ95gS5HKSphmmirio
这是一个简单的简单Html示例.
<html>
<head>
</head>
<body>
<div class="ad">
<script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&size=300x250&clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&media=108786&campaign=1"></script>
</div>
</body>
</html>
但是,如果我在Angular模板中添加div,它将无法渲染,控制台也没有任何内容.
我在这里播放并运行了一些广告(http://www.odds.nu/erbjudanden),但它们是.gif或iframe.我希望能够显示Javascript广告.它们被添加到Html中,但不会被渲染(放在页面底部).
$ sce或$ compile可以帮助吗？
我的index.html
<div data-ng-view="" class="mainView"></div>
我的app.js.
$routeProvider.when("/erbjudanden", {
controller: "offerController",
templateUrl: "/app/templates/offers.html"
});
我的offer.html
<div class="ad">
<script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&size=300x250&clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&media=108786&campaign=1"></script>
</div>
有解决方案吗
如果您检查了该 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 示例
另外我需要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，但很容易调整角度版本，我建议你将其作为家庭作业来实现 =)
| 归档时间： |
|
| 查看次数： |
1455 次 |
| 最近记录： |