放置亚马逊横幅 |角V4 [英] Placing Amazon Banner | Angular V4
问题描述
我将亚马逊横幅放置在有角度的材料 2 卡内.但问题是它没有渲染.它显示空的 div.可能是什么原因.下面是显示我是如何做到的代码.
<div class="adv"><script type="text/javascript" language="javascript">var aax_size = '728x90';var aax_pubname = 'XXXXXXXXXXX';var aax_src = '302';<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</md-card>
我也尝试使用属性绑定来绑定它
<span [innerHTML]="advertisement()"></span>广告(){return `<div class="adv"><script type="text/javascript" language="javascript">var aax_size = '728x90';var aax_pubname = 'XXXXXXXXXXX';var aax_src = '302';<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
`;
}
我还尝试在我的卡片中动态添加 div,它显示在 div 内,但没有出现横幅.下面是显示我是如何做到的代码.
ngAfterViewInit() {让 x: HTMLElement = document.getElementById('adv');让 s: HTMLScriptElement = document.createElement('script');s.type = '文本/javascript';//s.language = 'javascript';让代码 = `var aax_size = '728x90';var aax_pubname = 'XXXXXXX';var aax_src = '302';`;让 src = document.createElement('script');src.type = '文本/javascript';//src.language = 'javascript';src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';尝试 {s.appendChild(document.createTextNode(code));x.appendChild(s);x.appendChild(src);}赶上(e){s.text = 代码;document.body.appendChild(s);}控制台日志(x);}
在删除 SO 中关于或类似于此问题的所有帖子后,我没有找到任何解决方案.我几乎遵循了这些帖子中的所有内容,但没有任何效果我.之后我遇到了 postscribe 库,它可以从外部加载任何第三方脚本.>
首先我安装了库并将其导入到我的组件中
import * as postscribe from 'postscribe';
在那之后,我所做的就是在我的 ngAfterViewInit
函数中调用一个函数,通过将 div
与它的 id
定位,在我的例子中是adv
并将 script
作为第二个参数传递给该函数.
ngAfterViewInit() {postscribe('#adv', `<script type="text/javascript" language="javascript">var aax_size='728x90';var aax_pubname = 'XXXXXXXX';var aax_src='302';<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
通过这样做,我的横幅被加载了.
I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}
After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit
function, by targetting the div
with its id
which in my case was adv
and passed the script
as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.
这篇关于放置亚马逊横幅 |角V4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!