javascript 打开新窗口并传递数据

📌 相关文章

📜 javascript 打开新窗口并传递数据 - Javascript (1)

📅 最后修改于: 2023-12-03 15:01:43.383000 🧑 作者: Mango

在web应用程序中，有时需要在一个新的窗口中展示特定的内容。JavaScript提供了一个方便的方法来打开新窗口并且传递数据给它。

window.open()方法

使用window.open()方法可以打开一个新窗口。这个方法接受三个参数：URL，窗口名称和窗口属性。例如，下面的代码可以打开一个新的窗口并且打印"Hello World!"信息。

var newWindow = window.open("", "newWindow", "width=200,height=100");
newWindow.document.write("Hello World!");

在上面的代码中，window.open()方法打开了一个新窗口，传递了名称为"newWindow"，并指定了宽度和高度。然后，newWindow.document.write()方法在新窗口中写入了内容。

传递数据

打开一个新窗口并且传递数据给它，可以在URL中传递参数。例如，下面的代码中，将name和age参数传递给新窗口。

var name = "John";
var age = 30;
var newWindow = window.open("newWindow.html?name="+name+"&age="+age, "newWindow", "width=200,height=100");

在上面的例子中，使用?字符来指定参数列表，每个参数之间使用&字符分隔。新窗口可以通过window.location.search方法来读取参数列表。

var params = window.location.search.substring(1).split("&");
var name = params[0].split("=")[1];
var age = params[1].split("=")[1];

在上面的代码中，substring(1)方法用来去掉第一个字符"?"，然后使用split("&")方法将参数列表分割成一个数组。然后可以通过split("=")方法来获取每个参数的值。

完整的示例

下面是一个完整的示例，演示如何在一个新窗口中打开一个HTML页面，并且传递参数给它。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript 打开新窗口并传递数据</title>
</head>
<body>
	<button onclick="openNewWindow()">打开新窗口</button>
	<script type="text/javascript">
		function openNewWindow() {
			var name = "John";
			var age = 30;
			var newWindow = window.open("newWindow.html?name="+name+"&age="+age, "newWindow", "width=200,height=100");
		}
	</script>
</body>
</html>

在上面的代码中，当用户单击"打开新窗口"按钮时，将会调用openNewWindow()方法，这个方法通过URL将name和age参数传递给新窗口。新窗口可以使用上面提供的代码来读取这些参数。