Javascript 在AngularJS视图中在移动Web中显示本机广告时出现问题
在我的AngularJS应用程序中，我试图将Facebook原生网络广告添加到我的一个视图中。我按照概述的步骤生成必要的HTML代码段，并将其添加到我的视图中 我的应用程序正在使用ui路由器解析路由。访问包含此代码段的路由/视图时，不会显示FB ad，也不会调用任何回调（onAdLoaded或onAdError） Facebook生成的HTML片段（添加到视图中）：Javascript 在AngularJS视图中在移动Web中显示本机广告时出现问题,javascript,html,angularjs,facebook-audience-network,Javascript,Html,Angularjs,Facebook Audience Network,在我的AngularJS应用程序中，我试图将Facebook原生网络广告添加到我的一个视图中。我按照概述的步骤生成必要的HTML代码段，并将其添加到我的视图中 我的应用程序正在使用ui路由器解析路由。访问包含此代码段的路由/视图时，不会显示FB ad，也不会调用任何回调（onAdLoaded或onAdError） Facebook生成的HTML片段（添加到视图中）： <div style="display:none; position: relative;"> <ifr
<div style="display:none; position: relative;">
<iframe style="display:none;"></iframe>
<script type="text/javascript">
var data = {
placementid: 'xxxxxxxxxxx_xxxxxxxx',
format: 'native',
testmode: true,
onAdLoaded: function (element) {
console.log('Audience Network ad loaded');
element.style.display = 'block';
},
onAdError: function (errorCode, errorMessage) {
console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
}
};
(function (w, l, d, t) {
var a = t();
var b = d.currentScript || (function () {
var c = d.getElementsByTagName('script');
return c[c.length - 1];
})();
var e = b.parentElement;
e.dataset.placementid = data.placementid;
var f = function (v) {
try {
return v.document.referrer;
} catch (e) {
}
return '';
};
var g = function (h) {
var i = h.indexOf('/', h.indexOf('://') + 3);
if (i === -1) {
return h;
}
return h.substring(0, i);
};
var j = [l.href];
var k = false;
var m = false;
if (w !== w.parent) {
var n;
var o = w;
while (o !== n) {
var h;
try {
m = m || (o.$sf && o.$sf.ext);
h = o.location.href;
} catch (e) {
k = true;
}
j.push(h || f(n));
n = o;
o = o.parent;
}
}
var p = l.ancestorOrigins;
if (p) {
if (p.length > 0) {
data.domain = p[p.length - 1];
} else {
data.domain = g(j[j.length - 1]);
}
}
data.url = j[j.length - 1];
data.channel = g(j[0]);
data.width = screen.width;
data.height = screen.height;
data.pixelratio = w.devicePixelRatio;
data.placementindex = w.ADNW && w.ADNW.Ads ? w.ADNW.Ads.length : 0;
data.crossdomain = k;
data.safeframe = !!m;
var q = {};
q.iframe = e.firstElementChild;
var r = 'https://www.facebook.com/audiencenetwork/web/?sdk=5.3';
for (var s in data) {
q[s] = data[s];
if (typeof(data[s]) !== 'function') {
r += '&' + s + '=' + encodeURIComponent(data[s]);
}
}
q.iframe.src = r;
q.tagJsInitTime = a;
q.rootElement = e;
q.events = [];
w.addEventListener('message', function (u) {
if (u.source !== q.iframe.contentWindow) {
return;
}
u.data.receivedTimestamp = t();
if (this.sdkEventHandler) {
this.sdkEventHandler(u.data);
} else {
this.events.push(u.data);
}
}.bind(q), false);
q.tagJsIframeAppendedTime = t();
w.ADNW = w.ADNW || {};
w.ADNW.Ads = w.ADNW.Ads || [];
w.ADNW.Ads.push(q);
w.ADNW.init && w.ADNW.init(q);
})(window, location, document, Date.now || function () {
return +new Date;
});
</script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
<style>
.thirdPartyRoot {
background-color: white;
color: #444;
border: 1px solid #ccc;
border-left: 0;
border-right: 0;
font-family: sans-serif;
font-size: 14px;
line-height: 16px;
width: 320px;
text-align: left;
position: relative;
}
.thirdPartyMediaClass {
width: 320px;
height: 168px;
margin: 12px 0;
}
.thirdPartySubtitleClass {
font-size: 18px;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 16px;
-webkit-box-orient: vertical;
}
.thirdPartyTitleClass {
padding-right: 12px;
line-height: 18px;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 36px;
-webkit-box-orient: vertical;
}
.thirdPartyCallToActionClass {
background-color: #416BC4;
color: white;
border-radius: 4px;
padding: 6px 20px;
float: right;
text-align: center;
text-transform: uppercase;
font-size: 11px;
}
.fbDefaultNativeAdWrapper {
font-size: 12px;
line-height: 14px;
margin: 12px 0;
height: 36px;
vertical-align: top;
}
</style>
<div class="thirdPartyRoot">
<a class="fbAdLink">
<div class="fbAdMedia thirdPartyMediaClass"></div>
<div class="fbAdSubtitle thirdPartySubtitleClass"></div>
<div class="fbDefaultNativeAdWrapper">
<div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
<div class="fbAdTitle thirdPartyTitleClass"></div>
</div>
</a>
</div>
</div>
风险值数据={
placementid:'XXXXXXXXXX uXXXXXXXX'，
格式：“本机”，
testmode:true，
onAdLoaded:函数（元素）{
console.log（“观众网络广告加载”）；
element.style.display='block'；
},
onAdError：函数（错误代码、错误消息）{
log（'观众网络错误（'+errorCode+'）'+errorMessage）；
}
};
（功能（w、l、d、t）{
var a=t（）；
var b=d.currentScript | |（函数（）{
var c=d.getElementsByTagName（'script'）；
返回c[c.length-1]；
})();
var e=b.parentElement；
e、 dataset.placementid=data.placementid；
var f=函数（v）{
试一试{
返回v.document.referer；
}捕获（e）{
}
返回“”；
};
var g=函数（h）{
变量i=h.indexOf（'/'，h.indexOf（'://'）+3；
如果（i==-1）{
返回h；
}
返回h.子串（0，i）；
};
var j=[l.href]；
var k=假；
var m=假；
如果（w！==w.parent）{
var n；
VarO=w；
而（o！==n）{
var h；
试一试{
m=m | |（o.$sf&&o.$sf.ext）；
h=o.location.href；
}捕获（e）{
k=真；
}
j、 推（h | | f（n））；
n=o；
o=o.父母；
}
}
var p=l.1；
如果（p）{
如果（p.length>0）{
data.domain=p[p.length-1]；
}否则{
data.domain=g（j[j.length-1]）；
}
}
data.url=j[j.length-1]；
data.channel=g（j[0]）；
data.width=screen.width；
data.height=screen.height；
data.pixelratio=w.devicePixelRatio；
data.placementindex=w.ADNW&&w.ADNW.Ads？w.ADNW.Ads.length:0；
data.crossdomain=k；
data.safeframe=！！m；
var q={}；
q、 iframe=e.firstElementChild；
var r='1https://www.facebook.com/audiencenetwork/web/?sdk=5.3';
用于（数据中的var s）{
q[s]=数据[s]；
if（数据类型）！=‘功能’{
r+='&'+s+'='+编码器组件（数据）；
}
}
q、 iframe.src=r；
q、 tagJsInitTime=a；
q、 根元素=e；
q、 事件=[]；
w、 addEventListener（“消息”，函数（u）{
if（u.source！==q.iframe.contentWindow）{
返回；
}
u、 data.receivedTimestamp=t（）；
如果（此.sdkEventHandler）{
这是sdkEventHandler（美国数据）；
}否则{
this.events.push（u.data）；
}
}.bind（q），false）；
q、 tagJsIframeAppendedTime=t（）；
w、 ADNW=w.ADNW | |{}；
w、 ADNW.Ads=w.ADNW.Ads | |[]；
w、 ADNW.Ads.push（q）；
w、 ADNW.init和&w.ADNW.init（q）；
})（窗口、位置、文档、Date.now | |函数（）{
返回+新日期；
});
第三方{
背景色：白色；
颜色：#444；
边框：1px实心#ccc；
左边框：0；
右边界：0；
字体系列：无衬线；
字体大小：14px；
线高：16px；
宽度：320px；
文本对齐：左对齐；
位置：相对位置；
}
.第三方二级{
宽度：320px；
高度：168px；
边际：12px0；
}
.第三方子类{
字号：18px；
-webkit线夹：1个；
溢出：隐藏；
文本溢出：省略号；
显示：-网络工具包盒；
高度：16px；
-网络工具包盒方向：垂直；
}
.三等舱{
右侧填充：12px；
线高：18px；
-webkit线夹：2个；
溢出：隐藏；
文本溢出：省略号；
显示：-网络工具包盒；
高度：36px；
-网络工具包盒方向：垂直；
}
.第三方CallToAction类{
背景色：#416BC4；
颜色：白色；
边界半径：4px；
填充：6px 20px；
浮动：对；
文本对齐：居中；
文本转换：大写；
字体大小：11px；
}
.FBDefaultNativeAvrapper{
字体大小：12px；
线高：14px；
边际：12px0；
高度：36px；
垂直对齐：顶部；
}
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
<!DOCTYPE html>
<html ng-app="kcl-app">
<head>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title ng-bind="pageTitle"></title>
</head>
<body>
<!-- ui-router view -->
<div ui-view></div>
<!-- FB Begin -->
<div class="fb-native">
<div style="display:none; position: relative;">
<iframe style="display:none;"></iframe>
<script type="text/javascript">
var data = {
placementid: 'xxxxxxxxxxx_xxxxxxxx',
format: 'native',
testmode: true,
onAdLoaded: function (element) {
console.log('Audience Network ad loaded');
element.style.display = 'block';
},
onAdError: function (errorCode, errorMessage) {
console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
}
};
(function (w, l, d, t) {
var a = t();
var b = d.currentScript || (function () {
var c = d.getElementsByTagName('script');
return c[c.length - 1];
})();
var e = b.parentElement;
e.dataset.placementid = data.placementid;
var f = function (v) {
try {
return v.document.referrer;
} catch (e) {
}
return '';
};
var g = function (h) {
var i = h.indexOf('/', h.indexOf('://') + 3);
if (i === -1) {
return h;
}
return h.substring(0, i);
};
var j = [l.href];
var k = false;
var m = false;
if (w !== w.parent) {
var n;
var o = w;
while (o !== n) {
var h;
try {
m = m || (o.$sf && o.$sf.ext);
h = o.location.href;
} catch (e) {
k = true;
}
j.push(h || f(n));
n = o;
o = o.parent;
}
}
var p = l.ancestorOrigins;
if (p) {
if (p.length > 0) {
data.domain = p[p.length - 1];
} else {
data.domain = g(j[j.length - 1]);
}
}
data.url = j[j.length - 1];
data.channel = g(j[0]);
data.width = screen.width;
data.height = screen.height;
data.pixelratio = w.devicePixelRatio;
data.placementindex = w.ADNW && w.ADNW.Ads ? w.ADNW.Ads.length : 0;
data.crossdomain = k;
data.safeframe = !!m;
var q = {};
q.iframe = e.firstElementChild;
var r = 'https://www.facebook.com/audiencenetwork/web/?sdk=5.3';
for (var s in data) {
q[s] = data[s];
if (typeof(data[s]) !== 'function') {
r += '&' + s + '=' + encodeURIComponent(data[s]);
}
}
q.iframe.src = r;
q.tagJsInitTime = a;
q.rootElement = e;
q.events = [];
w.addEventListener('message', function (u) {
if (u.source !== q.iframe.contentWindow) {
return;
}
u.data.receivedTimestamp = t();
if (this.sdkEventHandler) {
this.sdkEventHandler(u.data);
} else {
this.events.push(u.data);
}
}.bind(q), false);
q.tagJsIframeAppendedTime = t();
w.ADNW = w.ADNW || {};
w.ADNW.Ads = w.ADNW.Ads || [];
w.ADNW.Ads.push(q);
w.ADNW.init && w.ADNW.init(q);
})(window, location, document, Date.now || function () {
return +new Date;
});
</script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
<style>
.thirdPartyRoot {
background-color: white;
color: #444;
border: 1px solid #ccc;
border-left: 0;
border-right: 0;
font-family: sans-serif;
font-size: 14px;
line-height: 16px;
width: 320px;
text-align: left;
position: relative;
}
.thirdPartyMediaClass {
width: 320px;
height: 168px;
margin: 12px 0;
}
.thirdPartySubtitleClass {
font-size: 18px;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 16px;
-webkit-box-orient: vertical;
}
.thirdPartyTitleClass {
padding-right: 12px;
line-height: 18px;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 36px;
-webkit-box-orient: vertical;
}
.thirdPartyCallToActionClass {
background-color: #416BC4;
color: white;
border-radius: 4px;
padding: 6px 20px;
float: right;
text-align: center;
text-transform: uppercase;
font-size: 11px;
}
.fbDefaultNativeAdWrapper {
font-size: 12px;
line-height: 14px;
margin: 12px 0;
height: 36px;
vertical-align: top;
}
</style>
<div class="thirdPartyRoot">
<a class="fbAdLink">
<div class="fbAdMedia thirdPartyMediaClass"></div>
<div class="fbAdSubtitle thirdPartySubtitleClass"></div>
<div class="fbDefaultNativeAdWrapper">
<div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
<div class="fbAdTitle thirdPartyTitleClass"></div>
</div>
</a>
</div>
</div>
</div>
<!-- FB End -->
</body>
</html>
var b = d.currentScript || (function() {
var c = d.getElementsByTagName('script');
return c[c.length - 1];
})();
var e = b.parentElement;
<div style="display:none; position: relative;">
<div id="fb-ad-container" style="display:none; position: relative;">
var e = d.getElementById("fb-ad-container");