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

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

文件1.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 脚本标签中.js File2的新窗口<script th:src="@{/resources/build/js/File2.js(v=${startUpTime})}" />

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

任何人都可以帮忙吗？

主页.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>

新窗口.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>

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

文件中的代码1.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);

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

文件2中的代码.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返回到文件2.js该文件已在FIle1中使用.js从另一个页面。

希望你明白了。

看起来可能缺少一些额外的代码上下文，这实际上可能在一个循环中，或者不包含在全局命名空间中。在提供的文字代码中，如果 File2 在 File1 之后的页面上加载empObj，则可以访问它。

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

使用像 WebPack 或 Browserify 这样的东西来简化范围，让你的代码更加模块化(还有更多的好处)
使用 Web 存储 API 将数据存储在文件 1 中，并在文件 2 中访问它们
通过查询字符串(IE：/App/home/happyPath？name=Abc)将键/值对传递给新窗口，并在File2中解析它们

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

模块编程的工作原理：

我们创建一个函数来具有一种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，并使用module.fn = function(){}; module.obj = {}; module.variable = "";向其objects

//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();

我很抱歉我的英语水平不好。希望你明白，我想说什么。

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

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

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

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

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

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

希望这有帮助..

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

相关内容

最新更新

热门标签：