从内联HTML页面访问外部JS变量？

Question

如何从HTML页面中的外部JavaScript访问变量？

在我的外部JavaScript文件（init.js）中，我创建了一个变量调用：

var myMessage="Hello World";

在包含init.js的HTML页面中，但是当我尝试提醒它时：

alert(myMessage);

它给了我一个错误。 示例代码在这里

Answer 1

您可以通过以下方式调用外部js变量：

var init={
myMessage="Hello World";
}

调用您的html代码

alert(init.myMessage);

Answer 2

您的Codepen示例没有将代码作为外部文件包含在内，因此在内部是一个问题，但是通常您需要等待页面和所有元素完成加载。

下面的示例将等待1000ms或1sec，然后您将看到警报将显示变量。

 <div>
 Body content
 </div>
 <script>
   setTimeout(function() {
   alert(myMessage);  
   },1000);
 </script>

更好的方法当然是使用jQuery

    $('document').ready(function(){  });

而不是计时器，因为您不确定1秒就足够了。 连接可能不佳，所有页面加载可能需要更多时间。

如果您不想使用jQuery，那么也可以使用普通的JS方法。

纯JavaScript等效于jQuery的$ .ready（）如何在页面/ dom准备就绪时调用函数