简体   繁体   English

如何使用JavaScript在Secornd页面与首页之间进行交流?

[英]How to communicate from secornd page to first page usin javascript?

I have a requirement where i have to show the selected dropdown option from first page to second page of application. 我有一个要求,我必须在应用程序的第一页到第二页显示所选的下拉选项。

I have tried to write FirstPage.html 我试图写FirstPage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First page</title>
</head>
<body>
<div class="abc">
Dropdown:  <select id="ddlViewBy" onchange="fun()">
<option value="1">select</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
</select>
<p>selected option is :<b id="abc"></b></p>
<button onclick="redirect()">Redirect</button>
</div>
<script>
function fun(){
    var e = document.getElementById("ddlViewBy");
    var strUser = e.options[e.selectedIndex].text;
    document.getElementById("abc").innerHTML=strUser;
}
function redirect(){
    var linkToSeconPage="http://localhost:63342/test/SecondPage.html";
    window.location.href=linkToSeconPage;
}
</script>
</body>
</html>

and the SecondPage.html where i need to access strUser 和SecondPage.html,我需要访问strUser

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>second page</title>
</head>
<body>
<div>here i want to access the selected dropdown value from first page</div>
</body>
</html>

Could you please throw some light on the approach to use strUser to SecondPage.html. 您能否阐明使用strUser到SecondPage.html的方法。

And also the window.location.href=linkToSeconPage; 还有window.location.href = linkToSeconPage; is not working in firefox. 在Firefox中不起作用。 I have also tried window.location=linkToSeconPage; 我也尝试过window.location = linkToSeconPage; , window.location.assign(linkToSeconPage); ,window.location.assign(linkToSeconPage); and using return false; 并使用return false; after this after searching on google for answer but nothing worked in firefox but everything worked on IE 11. 之后,在Google上搜索答案,但在Firefox中没有任何作用,但在IE 11上一切正常。

Could you also suggest alternative for this using in firefox. 您还可以建议在firefox中使用此方法的替代方法吗? Thanks in advance. 提前致谢。

location.assign(url) and location = url are equivalent and supported in FireFox. location.assign(url)location = url等效的,并且在FireFox中受支持 Try leaving off window . 尝试离开window

Appending a value to the querystring as suggested by @Sam is not a bad option. 按照@Sam的建议在查询字符串上附加一个值不是一个坏选择。 Another option, which can be useful in more complex situations - or when you don't want to expose the selected value in the querystring (the value will be stored in logged files), is to use SessionStorage . 另一种选择是使用SessionStorage ,它在更复杂的情况下很有用-或者当您不想在查询字符串中公开所选值(该值将存储在记录的文件中)时。 In first page, add 在第一页中,添加

sessionStorage.setItem('SELECTED', strUser);

And on page, you can retrieve with 在页面上,您可以使用

sessionStorage.getItem('SELECTED');

SessionStorage stores the value in the browser for the lifetime of the user's current session. SessionStorage在用户当前会话的生存期内将值存储在浏览器中。 The token/key ( SELECTED in my example, but can be any text) is scoped to the domain; 令牌/密钥(在我的示例中为SELECTED ,但可以是任何文本)的作用域为域; thus other websites can't read the data that you place into SessionStorage. 因此其他网站无法读取您放入SessionStorage中的数据。

Pass the value to the second page using a get parameter eg 使用get参数将值传递到第二页,例如

 window.location.href=linkToSeconPage + '?val=valueToPassThrough';

Then on the second page use: 然后在第二页上使用:

var theValue = window.location.href.split('?')[1].split('=')[1];

However note that this will not take into account other get parameters passed to the page and in this respect it is fragile. 但是请注意,这将不考虑传递给页面的其他get参数,因此在此方面它很脆弱。

This is a very manual way of doing it and you would probably want to write a function which extracts this exact behaviour for you - and of course checks for problems with split - the above code assumes there is a ? 这是一种非常手动的方法,您可能想编写一个函数来为您提取准确的行为-当然还要检查split问题-上面的代码假定存在一个? in the URL and the argument required is the first one. 网址中的第一个参数。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM