Angular模板中的JavaScript广告 [英] Javascript ads in Angular templates
问题描述
我正在尝试在Angular模板中呈现一个Javascript广告，但它不会显示。当他们将Javascript附加到head标签时，我找到了一些解决方案，但我希望将广告放置在我的HTML（内部）中。
这里是一个柱塞： 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>
但是如果我将div添加到Angular模板中，它将无法渲染，并且控制台什么也没说。 / p>
我在此处投放了一些广告（ 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，{
控制器： 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> ;'）;
//为简洁起见省略了其他行
因此此文件正在执行 document.write 显然不能按角度工作，只是因为它们完全不同（即使您可以某种方式触发摘要循环，您仍然无权修改该脚本文件，因为由第三方服务器生成并具有自己的变量）
我要做的是-制作一个类似于ad.html的页面，就像index.html或404.html，然后从具有自定义属性的iframe src中请求来自角度文件（不是模板，而是像视图文件）的文件
然后我将使用自定义DOM元素，并使用jQuery或带角度的jQuery，请看下面的jQuery示例
此外，我还需要 krux / postscribe 插件，因为您不能在异步html文件中使用document.write
<！-创建多个所有者- ->
< ad-holder url = https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c=>< lt ; / ad-holder>
< div class = black-widow>
<！-具有大小属性->
< ad-holder url = http://google.com width = 100 height = 40>< / ad-holder>
< / div>
< ;!-使用iframe的jQuery填充->
< script>
//获取所有自定义元素
$（'ad-holder'）。each（function（）{
//创建iframe占位符
var $ iframe = $（document.createElement（'iframe'））;
//获取自定义元素的网址
var url = $（this）.attr（'url'）;
//请求带参数的ad.html文件，当前为url参数
$ iframe.attr（'src'，'ad.html？url ='+ url）;
//这里可以接受一些样式
$ iframe.width（'100px'）;
//或者从自定义元素
获取样式var heightValue = $（this）。 attr（'height'）;
$ iframe.height（heightValue ||'50px'）;
//使用iframe重建自定义元素
$（this）.append（ $ iframe）;
}）;
< / script>
< ;!-使用iframe指令填充--
< scrip>
angular.module（'app'，[]）。directive（'adHolder'，function（）{
return {
limit：'E'，
范围：{url ：'@'}，
//您也可以在编译阶段
链接中执行：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>
函数getQueryVariable（variable）{
var query = window.location.search.substring（1）;
//为简单起见，我们只希望有1个参数（url）
返回query.replace（'url ='，’）;
}
var adUrl = getQueryVariable（’url’）;
if（adUrl）
postscribe（'＃ad'，‘< script src =’+ adUrl +’>< \ / script>’））;
else {
var $ h1 = $（document.createElement（’h1’））;
$ h1.text（无广告）；
$（document.body）.append（$ h1）;
}
< / script>
< / body>
此解决方案的最好之处在于，您可以将相同的自定义元素与不同的<$ c $其他广告的c> url 属性
尽管此演示大量使用jQuery，但很容易调整角度版本，我会建议您实施作业=）
I'm trying to render a Javascript ad in my Angular template but it will not show up. I've found some solutions when they append the Javascript to the head tag but I want the ad to be placed in my Html (inside body).
Here is a Plunker: https://plnkr.co/edit/WHhQ95gS5HKSphmmirio
Here is a simple plain Html example that works.
<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>
But if I add the div inside an Angular template it will not render and the console says nothing.
I have some ads up and running here (http://www.odds.nu/erbjudanden), but they are either .gif or iframes. I want to be able to show Javascript ads instead. They are added to the Html but are not rendered (placed in the bottom of the page).
Can $sce or $compile help somehow?
My index.html
<div data-ng-view="" class="mainView"></div>
My app.js
$routeProvider.when("/erbjudanden", {
controller: "offerController",
templateUrl: "/app/templates/offers.html"
});
My offers.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>
Any solution?
If you had inspected result of that url request(make sure adBlock is off)
https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c=
You will see the actual result
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
So this file is executing document.write which obviously will not work in angular, just because they are totally different (even though you could trigger digest cycle somehow, you still don't have access to modify that script file, as it's generated by 3rd party server and has own variables)
What i would do is - make a page like ad.html, just like index.html or 404.html, then request this file from angular (not as template, but like a view file) as an iframe src with custom attributes
And i would use custom DOM element, and populate contents with jQuery, or with angular, look at jQuery sample below
Also i would need krux/postscribe plugin, because you cannot use document.write in async html files
<!-- 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 would look like
<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>
The best part of this solution is that you can reuse same custom-element with different url attribute for any other ads
Checkout jQuery real working demo
Although this demo heavily uses jQuery, it's easy to tweak for angular version, which i would suggest you to implement as homework =)
这篇关于Angular模板中的JavaScript广告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
