如何在 JavaScript 文件中初始化 HTML 文件中的函数?(浏览器应用)

Question

我正在使用评分板Chrome应用程序（我是Chrome应用程序新手）

index.html -（只是代码的一部分），其中用户输入记分板的玩家数量，提交并打开另一个 HTML 文件，其中根据用户输入显示表格和行数。

<form class="pure-form">
  <fieldset>
    <legend>Enter number of Players:</legend>
    <input type="text" id="users" placeholder="Input Number">
    <button type="submit" id="btn1" class="pure-button pure-button-primary">Submit</button>
  </fieldset>
</form>
<script>
  function(){
    //localStorage.setItem('value', document.getElementById("users").value);
    localStorage.value = document.getElementById("users").value;
  }
</script>
<script type="text/javascript" src="js/main-sheet.js"></script>
<script type="text/javascript" src="js/alert.js"></script>

主表.html -（也只是代码的一部分）

<table class="pure-table">
<thead>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Score</th>
        <th>Baluts</th>
    </tr>
</thead>
<tbody>
  <script type="text/javascript">
  function addMoreRows(){
    //var val = localStorage.getItem('value');
    var val = localStorage.value;
    document.getElementById("value").value = val;
    for(var x=0; x<val; x++) {
        var newRow = document.getElementById('pure-table').insertRow();
        var newCell = newRow.insertCell();
        newCell.innerHTML="<tr><td><input type='text' name='code'></td></tr>";
        newCell = newRow.insertCell();
        newCell.innerHTML="<tr><td><input type='text' name='name'></td></tr>";
        newCell = newRow.insertCell();
        newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";
        newCell = newRow.insertCell();
        newCell.innerHTML="<tr><td><input type='text' name='baluts'></td></tr>";
    }
}
</script>

将显示表头，但不显示行。虽然我明白为什么，因为函数 addMoreRows（） 并没有真正被调用，而且我不知道怎么做。

这是主表.js

document.getElementById("btn1").addEventListener("click", function() {
    if (!document.getElementById('users').value.trim()) {
        //alert("Please enter the remarks");
        chrome.app.window.create('../alert.html',{
          'bounds': {
            'width': 200,
            'height': 200
          },
          'resizable': false,
        });
    }
    else{
    chrome.app.window.create('../main-sheet.html', {
    'bounds': {
      'width': 1000,
      'height': 1000
    },
    'resizable': false,
  });
}});

如何调用函数 addMoreRows（） 来添加行？我将不胜感激您的帮助和更正。谢谢。

Answer 1

内联 JavaScript 不会被执行。此限制禁止内联块和内联事件处理程序。您必须在页面中包含包含javascript的脚本文件

<script src="script.js" type="text/javascript"></script">

而不是使用你的javascript代码（addMoreRows（））作为页面中的内联JS。

如需详细了解 Chrome 内容安全政策。

希望对您有所帮助。

Answer 2

看起来阅读文档确实会有所帮助，尤其是内容安全策略和禁用的 Web 功能。这意味着您不能使用本地存储和内联脚本。