本文介绍了 弹出子 层父子页面传值的实现方法，分享给大家，具体如下：

父页面获取子页面元素

格式：

$(\"# ID\").contents().find(\"#eleID\")

示例代码：

father.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >父级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id=\"father_dataChange\" class=\"btn\">父向子传值</span>
</div>
<  id=\" _dataChange\" src=\"son.html\"  border=\"0\"></ >
< >
  $(\"#father_dataChange\").click(function () {
   $(\"# _dataChange\").contents().find(\"#son_dataChange\").html(\"我是父页面传过来的值……\")
  })
</ >
</body>
</html>

son.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >子级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
</head>
<body>
<div id=\"son_dataChange\">我是子页面内容，点击“父向子传值”按钮我改变</div>
</body>
</html>

父页面调用子页面方法

格式：

$(\"# ID\")[0].contentWindow.fun()

参数：fun()为子页面的函数

注意：$(\"# ID\")[0]后面这个[0]必须要，亲测，删除就报错了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。

示例代码：

father.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >父级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id=\"father_fun\" class=\"btn\">父调子函数</span>
</div>
<  id=\" _fun\" src=\"son.html\"  border=\"0\"></ >
< >
  $(\"#father_fun\").click(function () {
   $(\"# _fun\")[0].contentWindow.son_fun()
  })
</ >
</body>
</html>

son.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >子级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
</head>
<body>
<div id=\"son_fun\">我是子页面内容，点击“父调子函数”按钮我改变</div>
< >
  function son_fun() {
   $(\"#son_fun\").html(\"我变啦！啦啦啦……\")
  }
</ >
</body>
</html>

子页面获取父页面元素

格式：

$(\"#fatherID\",window.parent.document)

参数：fun()为子页面的函数

示例代码：

father.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >父级页面</ >
</head>
<body>
<div id=\"father_dataChange\">我是父页面内容，点击“子向父传值”按钮我改变</div>
<  src=\"son.html\"  border=\"0\"></ >
</body>
</html>

son.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >子级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id=\"son_dataChange\" class=\"btn\">子向父传值</span>
</div>
< >
  $(\"#son_dataChange\").click(function () {
   $(\"#father_dataChange\",window.parent.document).html(\"变咯……\");
  });
</ >
</body>
</html>

子页面调用父页面方法

格式：

parent.ele

参数：fun()为子页面的函数

示例代码：

father.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >父级页面</ >
</head>
<body>
<  src=\"son.html\"  border=\"0\"></ >
< >
  var ml_var=\"我是父级定义的变量\";
  function ml() {
   alert(\"我被调用了！\")
  }
</ >
</body>
</html>

son.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >子级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id=\"son_dataChange\" class=\"btn\">点我后记得看控制台哟</span>
</div>
< >
  $(\"#son_dataChange\").click(function () {
   console.log(parent.ml_var);
   parent.ml();
  });
</ >
</body>
</html>

弹出 层

弹出 层，其他都差不多，主要是如何找到 ，先看下一般的 调用 弹框代码：

 .open({
 type: 2,
  : \'我是子 页面\',
 shadeClose: true,
 shade: 0.8,
 area: [\'380px\', \'90%\'],
 content: \'./son.html\'  // 的url
});

于是我就想给这个 弹框设置一个id，

 .open({
 id:\"son\",
 type: 2,
  : \'我是子 页面\',
 shadeClose: true,
 shade: 0.8,
 area: [\'380px\', \'90%\'],
 content: \'./son.html\'  // 的url
});

再通过这个id进行操作，操作方法和上面介绍的方法对应就可以，可是这种方法太繁琐，我又找了个更好的办法——利用 的success回调函数：

 .open({
 type: 2,
  : \'我是子 页面\',
 shadeClose: true,
 shade: 0.8,
 area: [\'380px\', \'90%\'],
 content: \'./son.html\',  // 的url
 success:function(dom){
  let $ Dom=$(dom[0]).find(\" \").eq(0).contents();
  $ Dom.find(\"#test\").html(\"我是从父级传来的值哟……\")
 }
});

示例代码：

father.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >父级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
  <  src=\" .js\"></ >
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id=\"father_dataChange\" class=\"btn\"> 弹出 层</span>
</div>
<  id=\" _dataChange\" src=\"son.html\"  border=\"0\"></ >
< >
 $(\"#father_dataChange\").click(function () {
   .open({
   id:\"son\",
   type: 2,
    : \'我是子 页面\',
   shadeClose: true,
   shade: 0.8,
   area: [\'380px\', \'90%\'],
   content: \'./son.html\',
   success:function(dom){
    let $ Dom=$(dom[0]).find(\" \").eq(0).contents();
    $ Dom.find(\"#test\").html(\"我是从父级传来的值哟……\")
   }
  });
 })
</ >
</body>
</html>

son.html

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >子级页面</ >
  <  src=\"https://code.jquery.com/jquery-2.2.4.min.js\"></ >
</head>
<body>
<div id=\"test\"></div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章