今天在弄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. Linux内核参数调优

    用法: vim /etc/sysctl.conf #修改内容 sysctl -p #生效 相关参数仅供参考,具体数值还需要根据机器性能,应用场景等实际情况来做更细微调整.   net.core.net ...

  2. Spring Boot工程支持HTTP和HTTPS,HTTP重定向HTTPS

    本文试图以通俗易通的方式介绍Https的工作原理,不纠结具体的术语,不考证严格的流程.我相信弄懂了原理之后,到了具体操作和实现的时候,方向就不会错,然后条条大路通罗马.阅读文本需要提前大致了解对称加密 ...

  3. SpringMvc 这篇文章写得不错 多多学习2017.6.29

    http://www.cnblogs.com/bigdataZJ/p/springmvc1.html  博客园链接

  4. 安装scrapy出错Failed building wheel for Twisted

    用64位windows10的CMD命令安装pip install scrapy出错: Running setup.py bdist_wheel for Twisted ... error Failed ...

  5. Python爬虫进阶六之多进程的用法

    前言 在上一节中介绍了thread多线程库.python中的多线程其实并不是真正的多线程,并不能做到充分利用多核CPU资源. 如果想要充分利用,在python中大部分情况需要使用多进程,那么这个包就叫 ...

  6. 查看centos系统位数和强制关闭yum

    一个小命令查看centos 是什么多少位系统 getconf LONG_BIT 方法二: [root@linuxzgf ~]#uname -m 如果有x86_64就是64位的,没有就是32位的后面是X ...

  7. driver匹配元素定位用法大全

    # -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver.common.by import By fr ...

  8. awk的递归

    想来惭愧,之前写的一篇文章<用awk写递归>里多少是传递里错误的信息.虽然那篇文章目的上是为了给出一种思路,但实际上awk是可以支持函数局部变量的. awk对于局部变量的支持比起大多数过程 ...

  9. 关于” 记一次logback传输日志到logstash根据自定义设置动态创建ElasticSearch索引” 这篇博客相关的优化采坑记录

    之前写过一篇博客是关于记录日志的简单方式的   主要就是  应用->redis->logstash->elasticsearch 整个流程的配置方法和过程的 虽然我们部分线上应用使用 ...

  10. 关于DatePicker在模态窗体下失效的问题

    最近用bootstrap做了一个租赁相关的管理系统,由于前端知识薄弱,也是编查资料边做.关于一些控件的用法,也是从网上查资料.下面,来说一下在写前端页面时遇到的几个坑. 这个系统中,日期控件用的是Da ...