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

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 arraylet chatElements = Array.prototype.slice.call(document.querySelectorAll(".chat"));// Loop over the arraychatElements.forEach(function(item){&nbsp; // Assign an event handler&nbsp; item.addEventListener("click", function(){&nbsp; &nbsp; console.log("open chat window here");&nbsp; });});.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(){&nbsp; &nbsp; &nbsp;$('a').click(function(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;jivo_api.open();&nbsp; &nbsp; &nbsp;});});