用javascript从子窗口向父窗口的SELECT列表添加OPTION选项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用javascript从子窗口向父窗口的SELECT列表添加OPTION选项相关的知识，希望对你有一定的参考价值。
如题！
二楼gucong朋友的答案的提示：Error:'options.length' 为空或不是对象
感谢 二楼gucong朋友的关心.
试过三种添加OPTION的方法都不行
后来改变了一下,子窗口不直接向父窗口添加,而是通过调用父窗口的方法来添加,结果问题就解决了
但是子窗口可以直接删除父窗口的OPTION选项,添加就不行,这点搞不明白.
var select = window.opener.document.getElementById("xxx");
select.options[select.options.length] = new Option( "abc", "2312" );
注意代码中的XXX应替换成父页面Select控件的ID； 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 为下拉菜单添加选项 </title>
</head>
<body id="test">
<script language="javascript">
var a = document.createElement("select");
for(i = 0; i < 10; i++)
var op = document.createElement("option");
op.innerHTML = "选项" + (i+1);
a.appendChild(op);
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
作了添加OPTION选项的功能，你只要稍微改一下实现子窗口向父窗口
Electron | Electron中打开和关闭子窗口以及子窗口向父窗口传值
场景
用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：
用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld_BADAO_LIUMANG_QIZHI的博客-CSDN博客
Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：
Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试_BADAO_LIUMANG_QIZHI的博客-CSDN博客_electron 浏览器调试
在上面搭建好项目以及知道怎样进行调试后。学习怎样打开和关闭子窗口以及子窗口向父窗口传值。
注：
- 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
- 关注公众号：霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
打开子窗口
在index.html中添加一个Button
<div> <button id="popChildWindows">弹出子窗口</button> </div>
然后在js中获取这个button，并设置其点击事件
var btnPopChiildWin=document.getElementById('popChildWindows');
btnPopChiildWin.onclick = PopChiildWin;
function PopChiildWin()
然后在项目下新建一个子窗口popup_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv= "X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>这是弹出的子窗口</h2>
<h2>公众号：霸道的程序猿</h2>
</body>
</html>
然后在上面js的点击事件中打开此窗口
//打开子窗口 第一个参数是子窗口的路径 第二个参数是起的别名
window.open('popup_page.html', "popup");
效果
关闭子窗口
在前面打开子窗口时获取窗口对象
let subWin;
function PopChiildWin()
//打开子窗口 第一个参数是子窗口的路径 第二个参数是起的别名
subWin = window.open('popup_page.html', "popup");
然后在html中新增一个button
<button id="closeChildWindows">关闭子窗口</button>
然后在js中设置其点击事件并关闭子窗口
var btnCloseChiildWin=document.getElementById('closeChildWindows');
btnCloseChiildWin.onclick = CloseChiildWin;
function CloseChiildWin()
//关闭子窗口
subWin.close();
效果
子窗口向父窗口传值
在子窗口popup_page.html 中新建一个按钮并设置其点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>这是弹出的子窗口</h2>
<h2>公众号：霸道的程序猿</h2>
<button οnclick="sendMessageToParent()">向父窗口传递信息</button>
</body>
<script>
function sendMessageToParent()
window.opener.postMessage(
type: 1,
message: "这是来自于子窗口的问候"
);
</script>
</html>
然后在父窗口所引用的js中通过
window.addEventListener("message", (msg) =>
console.log("接收到的消息：", msg);
)
接受消息
这里传送的消息是一个对象，效果如下
以上是关于用javascript从子窗口向父窗口的SELECT列表添加OPTION选项的主要内容，如果未能解决你的问题，请参考以下文章