JavaScript数据传递：本窗口与不同窗口

"本文主要介绍了JavaScript中在同一个窗口内以及不同窗口间传递数据的方法，包括获取和设置元素的值，以及使用window.open、模态窗口和非模态窗口进行数据交互。" 在JavaScript中，本窗口的数据传递主要通过两种方式实现： 1. 获取和设置表单元素的值： 当用户点击一个按钮时，可以使用`onclick`事件监听器，将按钮的`value`属性值传递给函数。例如： ```html <input type="button" value="button" onclick="test(this.value)" /> ``` 在对应的JavaScript函数`test(value)`中，`value`参数就包含了按钮的值，可以通过`window.alert`显示出来。 2. 获取和设置非表单元素的值： 对于非表单元素，如`<span>`，可以使用`document.getElementById`获取或设置其`innerText`属性。例如： ```html <span id="search">测试内容</span> ``` 取值：`document.getElementById("search").innerText;` 设置：`document.getElementById("search").innerText = "内容";` 注意`innerText`和`innerHTML`的区别，`innerText`只获取纯文本，而`innerHTML`还包括HTML标签。 在不同的窗口间传递数据，有以下几种方法： 1. 新窗口打开： 使用`window.open`方法创建新窗口，并可以传递URL、窗口名称和特性。例如： ```javascript var win = window.open("Open.html", "win", "width=200,height=200"); ``` 然后可以通过`win`对象访问新窗口的DOM，进行数据交换。 2. 父窗口与子窗口之间的数据传递： - 父窗口到子窗口： 父窗口可以修改子窗口的元素值，如： ```javascript alert(win.document.getElementById("OpenDiv").innerHTML); win.document.getElementById("OpenDiv").innerHTML = "我是从父窗口中传过来的值"; ``` - 子窗口到父窗口： 子窗口可以通过`window.opener`引用父窗口的DOM，进行数据传递： ```javascript alert(window.opener.document.getElementById("OpenDiv").innerHTML); window.opener.document.getElementById("OpenDiv").innerHTML = "我是从子窗口Open传过来的值"; ``` 3. 模态窗口： 模态窗口使用`window.showModalDialog`方法打开，它会阻止用户与打开模态对话框之外的任何页面进行交互，直到对话框关闭。这种方式也可以用于数据传递，但具体用法和普通窗口有所不同。 4. 非模态窗口： 非模态窗口允许用户同时与多个窗口进行交互，数据传递的机制与新窗口打开类似，只是窗口的打开方式不同。 通过以上方法，开发者可以在JavaScript中灵活地处理本窗口及跨窗口的数据交互，实现丰富的用户界面和动态应用功能。