Angular iubenda-cs-preferences-link 路由后不工作

Question

在我的 Angular 项目中，我需要添加 iubenda，在使用我所有正确的 public 和私钥插入脚本后，一切似乎都正常工作。

此时我需要添加一个按钮来更改 cookie 首选项，所以我要插入 <a mat-button class="iubenda-cs-preferences-link"> Update Cookie Preferences </ a>

在第一次加载页面时，一切似乎都正常，但随后一旦在另一个页面上执行生根操作，按钮就会被删除，返回到用于更改 cookie 的按钮页面并单击它，什么也没有发生。

我认为问题在于当 iubenda 页面加载时，您在某个地方调用了一个 onReady 来修改 dom 以与您知道的类进行交互。

你有解决这个问题的方法吗？

Answer 1

经过一天的努力，我解决了这个问题。

我创建了一个包含和删除 iubenda 脚本的可注入服务。插入脚本时，_iub.csLoaded 设置为 false（这就是技巧）。

import { Injectable } from "@angular/core";

@Injectable()
export class IubendaService {

    constructor() { }

    public loadScript() {
        let isFound = false;
        const iubendaCs = '//cdn.iubenda.com/cs/iubenda_cs.js';

        const scripts = document.getElementsByTagName("script")
        for (let i = 0; i < scripts.length; ++i) {
            if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes(iubendaCs)) {
                isFound = true;
            }
        }

        if (!isFound) {
            let node = document.createElement('script');
            node.dataset.myiub = "myiub";
            node.type = 'text/javascript';
            node.innerText = 'var _iub = _iub || [];' +
            '_iub.csLoaded = false; ' +
            '_iub.csConfiguration = {' +
                '"consentOnContinuedBrowsing":false,' +
                '"countryDetection":true,' +
                '"gdprAppliesGlobally":false,' +
                '"invalidateConsentWithoutLog":true,' +
                '"perPurposeConsent":true,' +
                '"siteId":XXXX,' +
                '"whitelabel":false,' +
                '"cookiePolicyId":XXXX,' +
                '"lang":"it", ' +
                '"banner": { ' +
                '  "acceptButtonDisplay":true,' +
                '  "closeButtonRejects":true,' +
                '  "customizeButtonDisplay":true,' +
                '  "explicitWithdrawal":true,' +
                '  "listPurposes":true,' +
                '  "position":"float-top-center" ' +
                '},' +
            '};';
            document.getElementsByTagName('head')[0].appendChild(node);

            node = document.createElement('script');
            node.src = iubendaCs;
            node.type = 'text/javascript';
            node.async = true;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
        }
    }

    public removeScript() {
        const srcToDelete = [
            "//cdn.iubenda.com/cs/iubenda_cs.js",
            "//cdn.iubenda.com/cookie_solution/iubenda_cs/1.37.2/core-{insert your lang}.js"
        ];

        let scripts: HTMLCollectionOf<HTMLScriptElement>;
        for(let x = 0; x < srcToDelete.length; x++){
            scripts = document.getElementsByTagName("script");

            for (let i = 0; i < scripts.length; ++i) {
                if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes(srcToDelete[x])) {
                    document.getElementsByTagName('head')[0].removeChild(scripts[i]);
                }
            }
        }

        // Remove Custom Attribute
        scripts = document.getElementsByTagName("script");
        for (let i = 0; i < scripts.length; ++i) {
            if (scripts[i].hasAttribute('data-myiub')) {
                document.getElementsByTagName('head')[0].removeChild(scripts[i]);
            }
        }
    }
}

创建此组件后，您需要在使用它们的组件的 ngOnInit 和 ngOnDestroy 方法中调用此方法。

 ngOnInit(): void {
    this.iubendaService.loadScript();
  }

  ngOnDestroy(): void {
    this.iubendaService.removeScript();
  }

我希望有人需要这个解决方法。

Angular iubenda-cs-preferences-link 路由后不工作

Angular iubenda-cs-preferences-link not work after routing

javascript

routes

typescript

angular