Tawk.to href= "javascript:void(Tawk_API.toggle())"替代方案

Question

我有一个Tawk网站。聊天。我写我的内容安全策略，我需要避免所有内联脚本。

代码如下:

HTML

<a class="message_button anchor" id="message_button" href="javascript:void(Tawk_API.toggle())" title="Üzenjen nekünk!"><img
            alt="Üzenet küldés gomb ikonja" src="img/message_icon.svg" /></a>

JS

var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/5fb64551920fc91564c886eb/default';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
    })();

所以问题是javascript:void(Tawk_API.toggle());

$("#message_button").click(function() {
            $(this).attr("href", "javascript:void(Tawk_API.toggle())");
        });

但这是一样的。我试图添加一个eventListener与click和Tawk_API.toggle()，但控制台说Tawk_API.toggle()不是一个函数。

任何建议吗?javascript:void()的任何替代方案?

提前感谢您的回答!

Answer 1

您可以使用jquery的on()方法作为替代

<script>
    
  jQuery(document).ready(function($){
        
     $( "#message_button" ).on( "click", "a", function(){Tawk_API.toggle();});
     
    });
    
</script>

Answer 2

我试图添加一个eventListener与click和Tawk_API.toggle()，但控制台说Tawk_API.toggle()不是一个函数。

这是因为你调用Tawk_API时，API还没有加载。它需要使用Tawk_API.onLoad事件，参见Tawk文档中的示例:

Tawk_API.onLoad = function(){
    Tawk_API.toggle();
};

你必须这样做:

Tawk_API.onLoad = function(){
    $("#message_button").click(function() {
        Tawk_API.toggle();
    });
};

PS: $(this).attr("href", "javascript:void(Tawk_API.toggle())");结构是一个javascript导航，所以它是一个内联脚本。