在写代码的时候经常会用到将一个网页嵌入到另一个网页中，w3c也规定了一个标签<iframe>，这个标签本身就支持跨域，而且所有的浏览器都支持

iframe具有以下属性：

1、frameborder 设为1代表显示周围边框，设置为0不显示周围边框

2、height 设置iframe的高度

3、width 设置iframe的宽度

4、longdesc 属性值为URL 规定一个页面，该页面包含了有关 iframe 的较长描述

5、marginheight 定义 iframe 的顶部和底部的边距

6、marginwidth 定义 iframe 的左侧和右侧的边距

7、name 规定 iframe 的名称

8、sandbox 启用一系列对 <iframe> 中内容的额外限制。

9、scrolling 设置为 yes 代表显示滚动条，设置为no代表不显示滚动条，设置为auto 代表自动

10、seamless 属性值也是 seamless 规定 <iframe> 看上去像是包含文档的一部分

11、src 规定在 iframe 中显示的文档的 URL

12、srcdoc 规定在 <iframe> 中显示的页面的 HTML 内容

那么在设置好了之后如果在父页面中想要调用子页面的方法，或者在子页面中调用父页面的方法怎么办呢？？这个问题网上也很多介绍

父页面

<!DOCTYPE html>

<html >

<head>

    <title>Parent Page</title>

        <script language="javascript" type="text/javascript">

            function parenttest() {

                alert("这是父页面的方法！");

            }

            function btnClick() {

                document.getElementById("childframe").contentWindow.childtest();

            }

    </script>

</head>

<body>

   <div style="margin:auto;">

       <h1>This is the Parent Page.</h1>

       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/>

    </div>

    <div style="margin:auto;">

       <iframe style="width:300px; height:300px;" id="childframe" src="son.html"></iframe>

    </div>

</body>

</html>

子页面

<!DOCTYPE html>

<html >

<head>

    <title>Child Page</title>

    <script language="javascript" type="text/javascript">

      function childtest() {

          alert("这是子页面的方法！");

      }

      function btnClick() {

          window.parent.parenttest();

      }

    </script>

</head>

<body>

   <div style="margin:auto;">

       <h1>This is the Child Page.</h1>

       <input type="button" value="调用父页面的方法" onclick="btnClick()"/>

    </div>

</body>

</html>

这样就可以实现子页面与父页面方法的相互调用，拥有这个方法在处理起来非常的方便。

iframe 父子页面方法调用的更多相关文章

  1. iframe父子页面相互调用方法，相互获取元素

    父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...

  2. JavaScript 父子页面相互调用总结

    父子页面相互调用是一个在开发中经常遇到的问题,但是没有找到过比较全面的文章介绍.在此总结下来,供大家参考. 四种方式 一般情况下,我们可以使用iframe.window的open.showModalD ...

  3. JQuery javascript实现父子页面相互调用

    javascript实现父子页面相互调用 By:授客 QQ:1033553122 场景1 父页面调用子页面 如上图,在iframe子页面的<script>元素中,定义了taskStatus ...

  4. js和vue方法的相互调用（iframe父子页面的方法相互调用）。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  5. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. iframe父子页面调用小结

     子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法  (子页面同理,需将js方 ...

  7. iframe父子页面互调方法和属性

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...

  8. layui 如果调用 from 内嵌入的 iframe子页面方法

    (人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...

  9. iframe父子页面js之间的调用

    父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...

随机推荐

  1. Android Studio查找功能（搜索功能）及快捷键

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.在当前窗口查找文本[Ctrl+F] F3                  向下查找关键字出现位置 Shift+F3        向上一个关 ...

  2. 新人小达之wpf

    Wpf学习之路-- 第一次写微博,可能内容不够精细,但目的就是把问题讲明白,让看到文章的小伙伴们少走弯路. 由于公司的需要,需要学习.net的一门新技术-wpf. 要说wpf是什么框架?模式?架构?  ...

  3. 使用express创建新应用的骨架

    通过应用生成器工具 express 可以快速创建一个应用的骨架. 通过如下命令安装: $ npm install express-generator -g -h 选项可以列出所有可用的命令行选项: $ ...

  4. mui 页面间传值得2种方式

    通过最近得工作开发刚接触mui框架,用到了页面间得传值, 第一种:通过url进行传值 父页面代码: mui.openWindow({ id:'子页面.html', url:'子页面.html?para ...

  5. mysql性能优化配置总结

    看了一些优化mysql运维的一些书籍,在此记录总结下:进入mysql客户端输入以下sql:1.连接设置 show variables like '%max_connection%'; show sta ...

  6. superslide2插件

    地址:http://www.superslide2.com/ 做自适应要注意该宽度和高度 等比缩放

  7. Maven（二）之Maven项目构建演练

    从上一篇的讲解中我们知道了什么是Maven,然后它的安装配置,到修改本地仓库,这篇我们用一个实际的例子,带领大家走进我们的Maven之旅.让我们一起来体验一下Maven的高度自动化构建项目的过程. 一 ...

  8. （二）一起学 Java Collections Framework 源码之 AbstractCollection

    . . . . . 目录 (一)一起学 Java Collections Framework 源码之 概述(未完成) (二)一起学 Java Collections Framework 源码之 Abs ...

  9. 【理论篇】Percona XtraBackup 恢复单表

    小明在某次操作中,误操作导致误删除了某个表,需要立即进行数据恢复. 如果是数据量较小的实例,并且有备份,即便是全备,做一次全量恢复,然后单表导出导入,虽然麻烦一点,却也花不了多少时间:如果是数据量大的 ...

  10. STM32定时器

    /*****************************************************************************初始化定时器**************** ...