在JavaScript中获取父级页面的控件值可以通过window.parent对象、postMessage方法、跨域处理等多种方式实现。其中，使用window.parent对象是最常见和简单的方法。
详细描述： 使用window.parent对象可以轻松地访问父级页面的DOM元素，这种方法适用于子页面和父页面在同一个域下的情况。通过这种方法，你可以直接引用父页面的控件并获取其值。
一、使用 window.parent 对象
1. 获取父级页面的控件值
在JavaScript中，window.parent对象指向当前窗口的父窗口。假设你有一个子页面需要获取父页面中某个输入框的值，可以使用以下代码：
<!-- 父页面 -->
<input type="text" id="parentInput" value="Hello, Parent!">
<iframe src="child.html"></iframe>
<!-- 子页面 (child.html) -->
<script>
// 获取父页面中的输入框值
var parentInputValue = window.parent.document.getElementById('parentInput').value;
console.log(parentInputValue); // 输出: Hello, Parent!
</script>
在这个例子中，子页面通过window.parent.document获取父页面的DOM对象，然后通过getElementById方法获取输入框的值。
2. 修改父级页面的控件值
不仅可以获取父页面控件的值，还可以修改它们。例如：
<!-- 子页面 (child.html) -->
<script>
// 修改父页面中的输入框值
window.parent.document.getElementById('parentInput').value = "New Value from Child";
</script>
上述代码将在子页面加载时，将父页面输入框的值修改为 "New Value from Child"。
二、使用 postMessage 方法
当子页面和父页面不在同一个域时，直接访问父页面的DOM会导致跨域问题。此时，可以使用postMessage方法进行跨域通信。
1. 在父页面中监听消息
父页面通过window.addEventListener方法监听来自子页面的消息：
<!-- 父页面 -->
<input type="text" id="parentInput" value="Hello, Parent!">
<iframe src="child.html"></iframe>
<script>
window.addEventListener("message", function(event) {
// 确认消息来源
if (event.origin !== "http://your-child-page-origin") return;
// 获取子页面发送的消息
var message = event.data;
console.log("Received from child:", message);
// 回传父页面的输入框值
event.source.postMessage(
document.getElementById('parentInput').value,
event.origin
);
}, false);
</script>
2. 在子页面中发送消息
子页面通过window.parent.postMessage方法向父页面发送消息：
<!-- 子页面 (child.html) -->
<script>
// 向父页面发送获取值的请求
window.parent.postMessage("GetInputValue", "http://your-parent-page-origin");
// 监听父页面的回复
window.addEventListener("message", function(event) {
if (event.origin !== "http://your-parent-page-origin") return;
// 获取父页面回传的输入框值
var parentInputValue = event.data;
console.log("Received from parent:", parentInputValue);
}, false);
</script>
3. 安全性考虑
使用postMessage时，需要指定消息的目标源（即父页面或子页面的URL），以确保通信的安全性，防止恶意脚本的攻击。
三、跨域处理
跨域问题是指在不同域名、协议或端口之间进行资源请求时会受到浏览器的安全限制。以下是常见的跨域处理方法：
1. JSONP（JSON with Padding）
JSONP是一种通过