从和 html div 调用外部 js 函数答案

【问题标题】：Calling an external js function from and html div从和 html div 调用外部 js 函数
【发布时间】：2018-02-03 03:55:15
【问题描述】：

我正在制作一个 google chrome 扩展程序，只要您打开一个新标签，它就会简单地显示当前日期和时间。到目前为止，它只有在我将每个函数放在单独的脚本上时才有效（每个函数都显示日期或时间”。为了减少文件数量，我试图将两个函数放在同一个脚本中。我的问题是我似乎无法从同一个脚本文件中调用特定函数。我在谷歌上搜索的时间比我应该的要长，这让我发疯了。这是我的代码。任何帮助将不胜感激！

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type= "text/javascript" src ="script".js></script>

</head>

<body bgcolor="C1E9E1">
    <div class="boxDate">
        <script>displayDate();</script>
    </div>

    <br>
    <br>

    <div class="boxTime">       
        <script>displayTime();</script>
    </div>
</body>

function checkNum(i){
  if(i<10) i = "0"+i;
  return i;
}

function displayDate() {
  var day =  new Date();
  var yr = day.getFullYear().toString().substr(-2);
  var mn = day.getMonth() + 1;
  var dy = day.getDate();
  yr = checkNum(yr);
  mn = checkNum(mn);
  dy = checkNum(dy);
  var dateFormat = mn + " " + dy + " " + yr;
  t = setTimeout(displayDate, 500);
  return dateFormat;
  //document.getElementById("dateOutput").innerHTML = dateFormat; 
}

function displayTime(){
  var time = new Date();
  var hr = time.getHours() % 12 || 12;
  var mi = time.getMinutes();
  var sc = time.getSeconds();
  hr = checkNum(hr);
  mi = checkNum(mi);
  sc = checkNum(sc);
  var timeFormat = hr + ":" + mi + ":" + sc;
  t = setTimeout(displayTime, 500);
  return timeFormat;
  //document.getElementById("timeOutput").innerHTML = timeFormat;
}

注意：boxDate 和 boxTime 类来自一个 css 文件当我这样做时，我的代码确实有效，但就像我说的那样，这将涉及我必须拥有 2 个不同的 js 文件。

<div class="boxDate">
  <input type="text" id="dateOutput">
    script src = "displayDate.js"></script>
</div>

<div class="boxTime">
  <input type="text" id="timeOutput">
  <script src = "displayTime.js"></script>
</div>

【问题讨论】：

第一个问题src ="script".js>应该是src ="script.js">你关闭文件名结束前的src。
哎呀没注意到。谢谢你抓住它。不幸的是，它似乎对我的代码结果没有任何影响。我尝试将相同的脚本行放在我的

标签： javascript html

【解决方案1】：

如this comment 中所述，<script> 标签的src 属性未正确关闭。应该是<script src="script.js">。

即使该位已修复，它也可能无法正常工作，因为 Chrome 扩展程序不再允许执行内联脚本：请参阅 here 和 here。

您必须使用事件侦听器和message passing。

【讨论】：

感谢您的资源！但该死的虽然很烂。我会查看链接，如果没有任何效果，我只需要为脚本提供多个文件。

【解决方案2】：

使用内容脚本、后台脚本和清单中列出的权限。

谷歌浏览器扩展example.

【讨论】：