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

Question

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

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

var myMessage="Hello World";

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

alert(myMessage);

它给我一个错误。 Sample code here

Answer 1

可以通过make调用外部js变量

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

调用您的 html 代码

alert(init.myMessage);

Answer 2

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

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

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

更好的方法当然是使用jQuery的

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

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

如果您不想使用 jQuery，也可以使用 vanilla JS 方法。

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Accessing external JS variable from inline html page?