iframe父页面和子页面之间的方法调用

最新推荐文章于 2024-03-20 15:53:03 发布

阿啦ala

最新推荐文章于 2024-03-20 15:53:03 发布

阅读量400

点赞数

分类专栏： jQuery/js 文章标签： html5 css 布局模板 iframe jquery

本文链接：https://blog.csdn.net/weixin_39152200/article/details/107107911

版权

jQuery/js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

有两个页面，父页面index.html，子页面chilld.html
父页面index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <button class="pToC">父页面调用子页面的方法</button>
    <div>
      父页面
    </div>
    <iframe src="child.html" id="child" width=500" height=""></iframe>
  </body>
  <script type="text/javascript">
    function cChangeBg() {
      $('body').css('background', '#c3e6ce')
    }
  </script>
</html>

子页面chilld.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div>子页面</div>
    <button type="button" class="cToP">子页面调用父页面的方法</button>
  </body>
  <style>
    body{
      background-color: #03B8CF;
      font-size: 30px;
      color: #fff;
    }
  </style>
  <script type="text/javascript">
    function pChangeBg() {
      $('body').css('background', 'red')
    }
  </script>
</html>

在这里插入图片描述
1、父页面调用子页面中的方法

// 父页面调用子页面的方法pChangeBg
    $('.pToC').on('click', function() {
      let child = $('#child')[0].contentWindow //  HTML 对象来返回 iframe，可以通过 DOM 方法来处理被返回的对象
      child.pChangeBg()
    })

在这里插入图片描述

2、子页面调用父页面中的方法

// 子页面调用父页面的方法cChangeBg
    $('.cToP').on('click', function() {
      parent.cChangeBg()
    })

在这里插入图片描述

阿啦ala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe父页面和子页面之间的方法调用

有两个页面，父页面index.html，子页面chilld.html父页面index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></
复制链接

扫一扫

专栏目录