在写代码的时候经常会用到将一个网页嵌入到另一个网页中，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. Python之路-基本数据类型

    一.数据类型 1.数字 包含整型和浮点型,还有复数2.字符 长度,索引,切片也适用于列表的操作 移除空白 strip() 默认字符串前后的空格,制表符,换行符 strip(";") ...

  2. [android] 手机卫士黑名单功能（ListView结合SQLite增删改）

    修改界面,在顶部横条上增加一个添加按钮,点击打开一个自定义对话框,输入电话号码和拦截模式保存到数据库 自定义对话框看这篇http://www.cnblogs.com/taoshihan/p/53703 ...

  3. day001-html知识点总结（-）块级。行内元素区分

    -.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...

  4. opencv构建高斯卷积核

    关于高斯核函数可以参见阮一峰老师的日志:高斯模糊的算法 如何使用高斯核进行高斯模糊可以参见我的另一篇日志:opencv构建自定义卷积 Mat Gaussian_kernal(int kernel_si ...

  5. struts2 之 ThreadLocal 和 ActionContext

    1. ThreadLocal:该类提供了线程局部(thtead-local)变量.threadLocal是一个容器,该容器中存放的数据可以保证线程安全. 案例如: public class Threa ...

  6. ASP.NET CORE部署到Linux

    ASP.NET CORE部署到CentOS中 在Linux上安装.NET Core 参考:https://www.microsoft.com/net/core#linuxcentos 配置Nginx ...

  7. C语言基础知识点整理（函数/变量/常量/指针/数组/结构体）

    函数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...

  8. 【2017-04-18】Ado.Net C#连接数据库进行增、删、改、查

    一.简介 1.ado.net是一门数据库访问技术. 他可以通过程序来操作数据库 2.类库 Connection 类 和数据库交互,必须连接它.连接帮助指明数据库服务器.数据库名字.用户名.密码,和连接 ...

  9. java构造代码块，构造函数和普通函数的区别和调用时间

    在这里我们谈论一下构造代码块,构造函数和普通函数的区别和调用时间.构造代码块:最早运行,比构造函数运行的时间好要提前,和构造函数一样,只在对象初始化的时候运行.构造函数:运行时间比构造代码块时间晚,也 ...

  10. [bug] Cannot proceed because system tables used by Event Scheduler were found damaged at server start

    本地:mac 10.12.3  mysql 5.6 远程:linux 7.3    mysql 5.7.18.  (远程数据库yum安装,又5.6升级到5.7) 步骤:从本地数据库导出数据到远程数据库 ...