Question

目前我的数据表也有子行，在子行中，我的一个列具有href链接，并且我有以下onClick事件。

File1.js

var empObj = {'name' : "Abc"};
var cell = row.insertCell(-1);
var hrefLink = document.createElement('a');
hrefLink.setAttribute('href',"#");
hrefLink.setAttribute('id',"all");        
hrefLink.setAttribute('onClick',"window.open('/App/home/happyPath', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=60,width=1100,height=650')");
hrefLink.innerHTML = "ALL";
cell.appendChild(hrefLink);
cell.style.textAlign = "center";
row.appendChild(cell);

在上面的代码片段中，它创建了href元素并且瞄准了子行，并且还点击了它打开了一个带有目标html的新窗口。

但是它打开了新窗口我从thymleaf脚本标记<script th:src="@{/resources/build/js/File2.js(v=${startUpTime})}" />

File2.js

现在 File2.js 我想使用 File1.js 中的变量 empObj 进行其他数据操作和计算。< / p>

任何人都可以帮忙解决这个问题。

MainPage.html

<html>
<head>
<!-- <link rel="stylesheet" media="all"
    th:href="@{/vendors/jquery/jquery.dataTables.min.css(v=${startUpTime})}" />

</head>
<body>

  <div id="container"> 

This page will load the datable which having child rows with href link, code for loading the dataTable is implemented in the File1.js in dodcument ready method. </div>

  <th layout:fragment="page-specific-js" th:remove="tag">
  <script th:src="@{/resources/build/js/File1.js(v=${startUpTime})}" />
  </th>
</body>
</html>

NewWindow.html

  <html>
    <head>
    <!-- <link rel="stylesheet" media="all"
        th:href="@{/vendors/jquery/jquery.dataTables.min.css(v=${startUpTime})}" />

    </head>
    <body>

      <div id="container"> 

    This page has to load the data form File2.js , But for this  I reuiqred the object which is there in File1.js.  , And If I declare File1.js in thus page then it will load DataTable of mainPage.html which actually not required. </div>

      <th layout:fragment="page-specific-js" th:remove="tag">
   <script th:src="@{/resources/build/js/File2.js(v=${startUpTime})}" /> 
      </th>
    </body>
    </html>

Answer 1

看起来可能会丢失一些额外的代码上下文，并且这可能实际上处于循环中或者不包含在全局名称空间中。在提供的文字代码中，如果File2在File1之后加载到页面上，则可以访问empObj。

猜测您没有在同一页面上加载File1和File2，或者在函数范围内包含empObj。无论哪种方式，一些替代方案：

使用WebPack或Browserify之类的内容来简化范围并使代码更加模块化（还有更多好处）
使用File1中的Web Storage API存储您的数据，并在File2
通过query string（IE：/ App / home / happyPath？name = Abc）将键/值对传递到新窗口，并在File2中将parse传递给新窗口

Answer 2

序列化empobj并使用查询字符串传递到另一个页面，从另一个页面，您可以再次从url获取该查询字符串值并在那里反序列化它。下面是您的问题的答案，您可以如何序列化empobj并传递到另一个页面并在那里使用。

File1.js中的代码

serialize = function (obj) {
  var str = [];
  for (var p in obj) if (obj.hasOwnProperty(p)) {
     str.push(encodeURIComponent(p) + '=' +     encodeURIComponent(obj[p]));
   }
  return str.join('&');
  }
 var empObj = {
    'name': 'Abc'
 };
 var param = serialize(empObj);
 var href = '/App/home/happ‌yPath?' + param;
 var cell = row.insertCell(-1);
 var hrefLink = document.createElement('a');
 hrefLink.setAttribute('href',"#");
 hrefLink.setAttribute('id',"all");        
 hrefLink.setAttribute('onClick', 'window.open(\'' + href + '\', \'_blank\', \'toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=60,w‌idth=1100,height=650‌\')');
 hrefLink.innerHTML = "ALL";
 cell.appendChild(hrefLink);
 cell.style.textAlign = "center";
 row.appendChild(cell);

现在如何在另一个页面js上使用来自url的查询字符串的值。

File2.js中的代码

var queryString = window.location.search;
queryString = queryString.replace('?', '');
var empObj = {};
var pairs = queryString.split('&');
for (i in pairs) {
 var split = pairs[i].split('=');
 empObj[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
}

在这里，您已将empObj恢复到您在另一个页面的FIle1.js中使用的file2.js。

希望你明白了。

Answer 3

我向您展示了模块化JavaScript编程的简单方法，以及如何从每个variable访问module。

模块编程的工作原理：

我们创建一个具有class种类的函数。在此功能中，一切都无法从外部访问。 为什么我们这样做？每个人都可以轻松打开developer tools并执行函数或更改变量，甚至不使用debugger / breakpoint。我们想避免这种情况。
该函数的参数是我们的module，当前的window，当前的document和undefined。 为什么我们这样做？我们使用module来确保我们用于class的对象。 window，document和undefined确保我们使用与函数外部相同的对象。（iFrames，...）。参数undefined不会被设置，这可确保我们拥有100％null值。
我们立即执行function / class。因此，我们可以创建单独的javascript-files。

module参数用于将module分配给具有特定名称的window。在示例fileOne和fileTwo中。如果我们创建window.someObj = {};，则可以在窗口中从任何位置访问此对象。 window.someObj.hello = "Hello";可以访问someObj.hello。该函数获取此对象并使用functions

objects

module.fn = function(){}; module.obj = {}; module.variable = "";

//Simple modular javascript
(function (module, window, document, undefined) {
  module.someVariable = "Hello";
})((window.fileOne = {}), window, document);

(function (module, window, document, undefined) {
  module.otherVariable = "World";

  module.logBoth = function(){
    console.log(fileOne.someVariable + " " + module.otherVariable);
    //console.log(fileOne.someVariable + " " + fileTwo.otherVariable);
  }
})((window.fileTwo = {}), window, document);

fileTwo.logBoth();

//In your case you change your HTML, so all declared variables at runtime get lost. You need to store them.

(function (module, window, document, undefined) {
  var someVariable = "Hello";

  module.changeValue = function(){
    someVariable = "Hello World";
  }

  module.switchPage = function(){
    localStorage.setItem("someNameForTheItem", JSON.stringify(someVariable));
    //open your page here
  }
})((window.fileOne = {}), window, document);

(function (module, window, document, undefined) {
  var someVariable = "Hello";

  module.init = function(){
    //execute the function after document is ready.
    var localItem = localStorage.getItem("someNameForTheItem");
    someVariable = JSON.parse(localItem);
    console.log(someVariable);
  }
})((window.fileTwo = {}), window, document);

//wont work in the sandboxed window, because of CORS-Error. We cannot add item to the local Storage. Test it in your environment.
fileOne.switchPage();
fileTwo.init();

我很抱歉我的英语能力差。希望你明白，我想说的是什么。

Answer 4

在声明后，在全局范围内声明的变量应该可用于所有后续脚本。所以，

<script src="/File1.js"></script>
<script src="/File2.js"></script>

意味着“empObj”应该在File2.js中可用。

另一种情况是，如果您在IIFE中使用实现代码

(function(){
 //var empObj = {'name' : "Abc"};
}());

在这种情况下，您需要返回empObj对象。

希望这会有所帮助..

Answer 5

如果序列化它并将其解析为json，则可以使用window.name存储偶数对象。您不应该使用window.name来存储安全数据，因为它可以被其他脚本检索。

在href点击时将对象或变量放入新窗口

5 个答案: