帮写一个简单的html 案例,点击input 框旁边的按钮,弹出iframe层,在iframe层中选择某个值,会传递给 父框架的input,并关闭弹出iframe层
时间: 2024-10-25 16:13:04 浏览: 14
JS点击某个图标或按钮弹出文件选择框的实现代码
当然可以。这是一个基本的HTML案例,配合JavaScript来实现你的需求。在这个例子中,我们将创建一个带有输入框和点击按钮的页面,点击按钮后会弹出一个新的iframe,在其中可以选择一些选项,然后将选择的结果返回并更新到父页面的输入框。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>弹出iframe示例</title>
<style>
#popup {
display: none;
}
</style>
<script>
function openPopup() {
var popup = document.getElementById('popup');
popup.style.display = 'block';
// 这里假设iframe的内容是通过外部URL加载的,你可以替换为实际的URL
var iframe = document.getElementById('myIframe');
iframe.src = "iframe_content.html"; // 替换为你想要显示的选择页面
// 绑定iframe的load事件,当内容加载完成后执行回调函数
iframe.onload = function() {
var iframeContent = iframe.contentWindow.document.getElementById('selectedValue'); // 假设选择元素id为'selectedValue'
if (iframeContent) {
document.getElementById('parentInput').value = iframeContent.value; // 更新父页面的input
}
// 关闭弹出窗口
popup.style.display = 'none';
};
}
</script>
</head>
<body>
<input type="text" id="parentInput" placeholder="父页面输入框"><br>
<button onclick="openPopup()">选择并提交</button>
<!-- 弹出的iframe -->
<div id="popup" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px;">
<iframe id="myIframe" src="" width="100%" height="300"></iframe>
</div>
</body>
</html>
```
请注意,这个示例假设你有一个名为`iframe_content.html`的页面,用户可以在其中选择一个值,然后将选择的值存储在一个ID为`selectedValue`的元素中。你需要根据实际的结构调整相关的元素ID和属性。
阅读全文