上面代码中,我怎么选择一个值,传递回父框架? 写一个例子
时间: 2024-10-25 09:13:15 浏览: 8
在`iframe_content.html`中,你可以创建一个表单或者选择元素供用户交互。下面是一个简单例子,假设我们有一个下拉列表:
```html
<!-- iframe_content.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
</head>
<body>
<form id="selectionForm">
<label for="option">请选择一个值:</label>
<select id="option">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<br>
<input type="button" value="提交" onclick="submitSelection()">
</form>
<script>
function submitSelection() {
var selectedValue = document.getElementById('option').value; // 获取选中的值
window.parent.postMessage(selectedValue, '*'); // 使用postMessage发送数据到父页面
// 或者你也可以直接修改DOM,如 parent.document.getElementById('parentInput').value = selectedValue;
// 如果是关闭iframe,还可以加上相应的清理工作
}
</script>
</body>
</html>
```
在父页面的`openPopup()`函数中,我们需要监听`message`事件来接收从`iframe`发来的消息:
```javascript
// 在父页面的openPopup()函数内部增加这部分
window.addEventListener('message', function(event) {
if (event.origin !== 'http://your_iframe_domain.com') { // 防止跨站攻击
return;
}
event.preventDefault(); // 阻止默认的行为
document.getElementById('parentInput').value = event.data; // 更新父页面的输入框
// 关闭弹出窗口...
});
```
这里假设`iframe_content.html`是从`http://your_iframe_domain.com`域名加载的,所以我们在检查消息来源时做了限制。在`iframe`中选择值后,会触发`submitSelection()`函数,从而通过`postMessage`向父页面发送选中的值。
阅读全文