Question

我在我的一个javascript文件中设置了一个变量，我想在html文件中访问该变量。我该怎么做？

这里是我的javascript代码（文件名是JSUI.js）：

      JSUI = function () {
            this.glistName = null;
            this.renderUI = function(list) {
                this.glistName = list.listName;
                window.location="page2.html";   
            };
        };
var gJSUI = new JSUI();

page2.html：

 <body>
    <script src="js/JSUI.js"></script>
    ListName: <input type="text" id="listName"></input> 
    </body>


    <script type="text/javascript">

         if(document.readyState="complete"){
             document.getElementById("listName").value = gJSUI.glistName;
         }

    </script>

基本上，当调用JSUI.js的renderUI方法时，会加载page2.html，并且我想用在JSUI.js文件中定义的变量填充page2.html中的文本框。我如何实现相同的目标？

Answer 1

你实际上已经创建了一个类但是有一些错误而且最重要的是：你没有初始化类本身。

试试这个：

JSUI = function () {
    this.glistName = null;
    this.renderUI = function(list) {
        this.glistName = list.listName;
        window.location="page2.html";   
    };
};

在你的页面中：

if(document.readyState="complete") {
    var myobject = new JSUI();
    document.getElementById("listName").value = myobject.glistName;
}

Answer 2

有不同的方法可以达到预期的效果：

1）将变量设置为全局Window对象;
2）使用模块化模式，将变量导出到一个js文件中，然后将其导入另一个（我使用的）。使用AMD（requirejs），commonjs，ES6模块，...;
3）使用localstorage存储状态;
4）使用DOM存储状态;
5）在js加载时，在服务器上保持状态并使用脱水将状态提取到JS对象到不同的组件;
6）在加载页面时使用ajax从服务器获取状态，并在app bootstrap上将状态分派给需要它的不同组件;

从html页面访问js中定义的变量？

2 个答案: