网站所有页面链接打开聊天窗口

Question

我有一个客户想要他的所有页面链接到 html 主页，即当点击任何菜单、主页、所有内容时，打开聊天支持框。普通的href应该像这个示例那样做，但是主页上有几十个链接，他不想手动删除每个链接而只想用一个代码来做，这样他就可以随时删除它。<a href="javascript:jivo_api.open();">Open the chat</a>单击它时我需要打开聊天的链接示例：<li class="list-link"> <a href="tyres/index.html"> <i class="tyres ico"></i> anvelope <i class="wlf wlf-arrow-right arrow-link"></i> </a> </li>

Answer 1

正常的 href 应该像这个示例

您显示的代码未使用普通hrefs。它使用的技术已有 25 年以上的历史，并且是我们在拥有任何 API 标准或关注可访问性之前处理点击的方式。

首先，不要仅将超链接用作 JavaScript 事件挂钩。网页上的任何可见元素都支持click事件，但超链接表示导航。那些依赖辅助技术（如屏幕阅读器）的人在使用超链接时可能会在浏览您的网站时遇到问题，但不会出现导航问题。相反，只需使用另一个内联元素（如span）并提供您的click事件处理程序。

其次，javascript:....不需要，因为您将把 JavaScript 与 HTML 分开（又名“关注点分离”）。

现在，回答你的问题。如果您只是简单地提供在单击公共 CSS 类时应该打开聊天窗口的任何/所有元素，那么您可以创建非常简单的代码来查找所有这些元素，循环遍历它们，并为它们分配所有相同的事件处理程序，这将打开聊天。下面是一个例子：

// Get all the elements that have the "chat" class and put into an array

let chatElements = Array.prototype.slice.call(document.querySelectorAll(".chat"));

// Loop over the array

chatElements.forEach(function(item){

  // Assign an event handler

  item.addEventListener("click", function(){

    console.log("open chat window here");

  });

});

.chat { cursor:pointer; color:blue; }

<p class="chat">I will open the chat</p>

<p>I won't open the chat</p>

<div>I will <span class="chat">open the chat</span></div>

<h1 class="chat">I will open the chat</h1>

<h5>I won't open the chat</h5>

Answer 2

$(function(){

     $('a').click(function(event) {

          event.preventDefault();   

         jivo_api.open();

     });

});