需要帮助将 Onclick 事件移至外部 Javascript 以遵守内容安全策略

Question

我已将内联脚本移至外部页面以符合内容安全策略。这是我需要解决的最后一个 CSP 问题。我需要帮助用事件侦听器替换两个按钮中的“onclick”。我已经进行了彻底的研究，但这些示例与我的代码有很大不同，我很难弄清楚。我对 JavaScript 很陌生。我有两个切换选项卡，单击时会显示定价。页面加载时，第一个选项卡默认打开。当我从按钮中删除“onclick”并将事件侦听器添加到我的 JS 文件中时，单击时选项卡将不再打开，并且默认打开也不起作用。我确信这很简单，但我希望能够帮助您在外部页面中格式化 Javascript，以使这些切换选项卡能够与 CSP 配合使用。

这是我的html：

<div class="tab">
  <script type="text/javascript" src="/myExternalJavascript.js">
  </script>
  <button 
   class="tablinks"
   onclick="openTerms(event, 'Weekly')" 
   id="button1">Click This
  </button>
  <button 
   class="tablinks"
   onclick="openTerms(event, 'Monthly')" 
   id="button2">Click This
  </button>
</div>
<div id="Weekly" class="tabcontent">Do something great.</div>
<div id="Monthly" class="tabcontent">Do something great.</div>

这是我的外部 js 文件的内容（使用 w3 选项卡中的 javascript）：

// Get the element with id="button1" and click on it
document.getElementById("button1").click();

function openTerms(evt, priceTerms){
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++){
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++){
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(priceTerms).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("button1").addEventListener('click', function(){
  openTerms(event, 'Weekly')
});
document.getElementById("button2").addEventListener('click', function(){
  openTerms(event, 'Monthly')
});

Answer 1

将脚本引用移至元素结束之前，body以便当脚本尝试在文档中搜索元素时，所有元素都已解析到内存中。

这应该可以解决你的问题，这样：

<button class="tablinks" onclick="openTerms(event, 'Weekly')" 
id="button1">Click This</button>
<button class="tablinks" onclick="openTerms(event, 'Monthly')" 
id="button2">Click This</button>

删除该onclick="...."部分并将其放入您的 JavaScript 中，然后添加：

var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button2");
btn1.addEventListener("click", function(){openTerms(event, 'Weekly')});
btn2.addEventListener("click", function(){openTerms(event, 'Monthly')});