放置亚马逊横幅|角V4 [英] Placing Amazon Banner | Angular V4

问题描述

我正在将Amazon横幅广告放置在有角度的材料2卡中，但问题是它没有呈现，它显示了一个空的div。这可能是原因。下面是显示我如何做的代码。

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>`;

}

我也试图动态地将div添加到我的卡中，它显示在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);
}

推荐答案

在删除SO中的每个帖子之后关于这个问题或类似的问题，我没有找到任何解决方案。我遵循了那些帖子中的几乎所有内容，但对我没有任何帮助。之后，我遇到了发布库，该库从外部加载任何第三方脚本。

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';

之后，我所做的就是在 ngAfterViewInit 函数，通过将 div 定位为其 id ，在本例中为 adv 并将脚本作为第二个参数传递给该函数。

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屋！