Question

我已将内联脚本移至外部页面以符合内容安全策略。这是我需要解决的最后一个CSP问题。我需要帮助替换＆＃34; onclick＆＃34;从两个带有事件监听器的按钮。我已经彻底研究过了，但是这些例子与我的代码有很大不同，我很难搞清楚。我是Javascript的新手。我有两个切换标签，可以在点击时显示定价。页面加载时，默认情况下会打开第一个选项卡。当我删除＆＃34; onclick＆＃34;从按钮和添加事件监听器到我的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')});

Answer 2

将以下内容放在外部工作表的最底部解决了问题，button1的内容现在显示在页面加载上：

document.getElementById("button1").click();

外部工作表中的位置似乎是个问题。以下展示位置解决了这个问题。

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

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

2 个答案: