今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互传值,相互调用更自函数这些功能,这里我用一个简单的例子来介绍一下这些方法。

a.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function f()
{
$('#a').contents().find("#bbb").val("ddd");
}
function fun()
{
alert('弹出子页面调用的函数');
}
</script>
<div id="maindiv">test</div>
<iframe id="a" name="a" src="b.html" width="600" height="400"></iframe><br />
<input type="button" value="给子页面表单赋值" onclick="f()" />

b.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function f()
{
alert('开始调用父页面函数');
$(window.parent.fun());
$(window.parent.$("#maindiv").html("子页面赋过来的值"));
}
</script>
<form name="cform"><input type="text" name="b" id="bbb" /><input name="btn" type="button" onclick="f()" value="调用父函数并给父页面元素赋值" /></form>

属性

new : HTML5 中的新属性。

属性 值 描述
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder
  • 1
  • 0
规定是否显示框架周围的边框。
height
  • pixels
  • %
规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。
scrolling
  • yes
  • no
  • auto
规定是否在 iframe 中显示滚动条。
seamless seamless 规定 <iframe> 看上去像是包含文档的一部分。
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 <iframe> 中显示的页面的 HTML 内容。
width
  • pixels
  • %
定义 iframe 的宽度。

var _body = window.parent;--------------------获取这个div2的父级窗口,那么自然是这个body了;

var _iframe1 = _body.document,getElementById('rightMain');-------------------根据id获取iframe1这个对象;

_iframe1.contentWindow.location.reload(true);-----------------------看到reload就该知道是刷新了这个iframe1了。

https://www.cnblogs.com/eco-just/p/9091018.html

jquery操作iframe的方法:父页面和子页面相互操作的方法的更多相关文章

  1. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  2. HTML中IFrame父窗口与子窗口相互操作

    一.Iframe篇 //&&&&&&&&&&&&&&&&&&am ...

  3. iframe中在父窗口打开子页面

    我们在做页面框架的时候,通常会采用一个iframe来显示子页面,但有这么种情况,就是session失效时,登录页面就会显示在iframe中,这不符合常理,一般应该显示在顶部才对. 下面的js代码可以解 ...

  4. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  5. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  6. Jquery父页面和子页面的相互操作

    //父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $(" ...

  7. 用jQuery在IFRAME里取得父窗口的某个元素的值

    收集网上的一些示例: 用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window. ...

  8. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  9. layer通过父页面调用子页面的方法及属性

    引言 在使用layer.js的过程中,需要通过layer.open()以iframe的形式打开特定的页面,同时需要用layer的按钮对打开的页面进行提交及重置操作,但是苦于不知如何在父页面调用子页面的 ...

  10. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

随机推荐

  1. JAVA PERSISTENCE API (JPA)

    13.2.1. About JPA The Java Persistence API (JPA) is the standard for using persistence in Java proje ...

  2. python取txt文件的若干行到另一个文件

    取movie.txt文件的若干行到movie2.txt #取txt文件 的若干行到另一个txt f1 = open(r'F:\movie.txt','rb') f2= open(r'F:\movie2 ...

  3. Windows下Pytesser安装

    安装流程   详细步骤 安装PIL 32位机器:去到PIL官网进行安装 64位机器:建议使用Pillow代替PIL,PIL官网的安装包在64位机器下无法找到,安装Pillow也非常简单,使用pip就可 ...

  4. 各位情人节快乐, Python帮忙撒狗粮, 我连夜做了这个程序!

    阅读本文大概需要5分钟 码农的情人节 一年一度的情人节要来啦,这个浪漫温馨的节日,走在大街小巷,走在地铁里,走在商场里,走在电影院,姑娘们手里几乎都捧着一束花,心里都是乐滋滋的,一脸幸福的样子,忽然想 ...

  5. bzoj 4501 旅行

    01分数规划+最大权闭合子图 倒拓扑序处理每个节点 $$f[x]=\frac{\sum{f[v]}}{n}+1$$ 二分答案$val$ 只需要判断是否存在$\sum{f[v]}+1-val>0$ ...

  6. 阿里巴巴Java开发程序猿年薪40W是什么水平?

    对于年薪40万的程序员,不只是技术过硬,还有一个原因是他们所在的公司福利高,或者会直接持股.在BAT中就是一个很好的案例,例如阿里巴巴P7,P8级别的员工不仅是年薪30到80万不等,还有更多股票持有. ...

  7. Django 基础一(安装和启动)

    在开始跟着本文学习Django进行Web开发之前你需要有一定的python编程基础,会用一些简单的Linux系统命令.如果你对python一无所知,请先去这个网站学习一下python编程的基础 Lin ...

  8. Maven安装教程详解

    一.准备工作 1.确定电脑上已经成功安装jdk7.0以上版本                 2.win10操作系统                 3.maven安装包            下载地 ...

  9. 前端教程(1)http协议的深刻理解

    一 HTTP协议简介 作为学习前端开发的开始,我们必须搞明白以下几件事 1.什么是互联网      互联网=物理连接介质+互联网协议     2.互联网建立的目的? 数据传输打破地域限制,否则的话,我 ...

  10. PHP Array 简介

    PHP Array 简介 数组函数允许您访问和操作数组. 支持单维和多维数组. 安装 数组函数属于 PHP 核心部分.无需安装即可使用这些函数. PHP 5 Array 函数 函数 描述 array( ...