iframe的使用小贴士
1.之前又说到“根据内容计算iframe的高度”
2.现在想说的是,一般iframe页面都是嵌套在父页面当中,所以在一般在iframe里面做相关动作时默认都是iframe页面的,不会影响到父页面。因此若是需要在iframe的子页面里面操作父页面的元素,我们会如何做?
iframe 子页面操作父页面元素需要知道的两点是:
(1)iframe 子页面和父页面必须属于同一个域下。(这个问题,一般在本地页面来做到,是不太可能的,经常会有这个错误出现 “Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.”,故而一般的解决方案是放在服务器上去访问。 )
(2)iframe 页面获取父页面的对象方法是 parent。
例如:iframe 子页面获取父页面的id为mask的对象:$("#mask",parent.document)
$("#mask",parent.document).html() --------- id=mask的html内容
同理可以找到其他类型的对象
其次,就是父页面获取iframe子页面中的对象:$(window.frames["framename"].document).find("#id") 或者 $("#iframeid").contents().find("#id");
例如:$(window.frames["mainframe"].document).find("#mask2"); 中括号中的是iframe的名字,find后面则是对象的id。
详见链接:http://blog.csdn.net/zalion/article/details/5894103
3.使用iframe时,如何正确使用,一般使用iframe时,也是会有需要通过a标签切换的
例如:
<ul class="nav nav-list">
<li class="active parent_li"><a href="BSwelcome.aspx" target="mainframe"></li>
<li class="parent_li"><a href="MyContacts/MyInfoAssitant/BSMyInfoList.aspx?jb_id=&grade=all&&paixu=no®s=dd&cup=1" target="mainframe"></a></li>
<li class="parent_li"><a href="MyContacts/MyOrder/BSMyOrderList.aspx?cup=1&&sel=no" target="mainframe"></a></li>
<li class="parent_li"><a href="MyContacts/SubmitOrder/BSSubmitOrderList.aspx?cup=1" target="mainframe"></a></li>
</ul>
<iframe id="ifrma1" src="BSwelcome.aspx" name="mainframe" frameborder="no" scrolling="yes"
style="width: 100%; height: 100%;"></iframe>
一般iframe要有id值,name值,而a标签链接了地址,还要多一句 target="mainframe" 而mainframe就是iframe的name值。才不至于点击a标签直接跳过去。
iframe的使用小贴士的更多相关文章
- Angular2 小贴士 Name
Angular2 正式版已经发布了一个月了,我也是通过各种方式在进行验证是否可以满足我们的需求,今天我就发现了一个问题.现在我们来一起说明一下,这个可能不算是bug,而应该需要我们记住就可以了. 我们 ...
- 【小贴士】虚拟键盘与fixed带给移动端的痛!
前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可 ...
- SVN小贴士
我辛辛苦苦写的到哪里了? SVN小贴士SVN服务器上的代码项目组公用,你的每一个提交都会体现给项目组每个人,所以提交要慎重,要注意避免代码冲突,使用SVN小贴士: 1.提前宣布开发计划,保持项目组成员 ...
- android性能小贴士 翻译
转自http://developer.android.com/training/articles/perf-tips.html 性能小贴士: 这篇文档主要一些微优化可以提升应用程序性能,但是这些改变不 ...
- 小贴士——提高PHP程序在NGINX代理服务器的性能
NGINX本身就是面向最大性能的代理服务器,因此在使用NGINX,并没有性能调整的配置工作.但是却有很多选项可用于定制NGINX的行为,利用底层硬件和操作系统. 下面将介绍用于提供PHP在NGINX的 ...
- jprofiler8使用小贴士
说明:本文的小贴士是针对jprofiler8的,其他版本上可能有不适用的地方 贴士一:使用jpenable监控,无需增加jvm参数和重启 贴士一:使用jpenable监控,无需增加jvm参数和重启 j ...
- 初识bd时的一些技能小贴士
既然小豆腐如此给力,而且充分的利用主动学习的优势,已经有了迅速脑补,压倒式的优势,不过这只是表面而已,一切才刚刚开始,究竟鹿死谁手,还有待验证. 以上可以看到,小豆腐为什么拼命的要teach我们了么, ...
- SharePoint每日小贴士Web部件
SharePoint每日小贴士Web部件 项目描写叙述 此Web部件从指定SP自己定义列表或一个选定的 RSS源选择一个随机项目.并显示一张图片.标题和一个Tip. 适 ...
- C和C++的内存操作小贴士(一):const char*的内存释放问题
C和C++的内存操作一直是困扰开发人员的老问题,基本概念相信老司机们都很清楚了,在这里就不做过多的描述了,只是把在实际开发中可能遇到的一些小问题的案例列举下,供大家参考.“C和C++的内存操作小贴士” ...
随机推荐
- 链接Eclipse和SQL SEVER
一.本文内容 讲诉使用JDBC建立Eclipse和Sql sever的桥梁的过程与其中可能遇见的问题. 二.详细内容 1.JDBC驱动的下载 建议一定要上与SQL SEVER相关的微软官网下载,以便找 ...
- scrum敏捷开发
团队PM:袁佩佩 scrum敏捷开发计划制定: 确定项目实施具体阶段目标 确定项目相关任务分解 确定每日站立会议进行计划 确定项目计划总结日程 确定风险解决方案
- XSS与CSRF两种跨站攻击比较
XSS:跨站脚本(Cross-site scripting) CSRF:跨站请求伪造(Cross-site request forgery) 在那个年代,大家一般用拼接字符串的方式来构造动态SQL 语 ...
- Akka官方文档翻译:Cluster Specification
参加了CSDN的一个翻译项目,翻译Akka的文档.CSDN提供的翻译系统不好使,故先排版一下放在博客上. 5.1 集群规范 注意:本文档介绍了集群的设计理念.它分成两部分,第一部分描述了当前已经实现的 ...
- Python性能鸡汤
http://pythoner.org/wiki/257/ 毫无疑问:Python程序没有编译型语言高效快速. 甚至Python拥护者们会告诉你Python不适合这些领域. 然而,YouTube已用P ...
- C++11新特性:Lambda函数(匿名函数)
声明:本文参考了Alex Allain的文章http://www.cprogramming.com/c++11/c++11-lambda-closures.html 加入了自己的理解,不是简单的翻译 ...
- POJ1002487-3279(map)
http://poj.org/problem?id=1002 题意:是说很多公司用了容易记住的电话号码,例如有英文字母的或者是用了很多连字符或没有连字符的.每个电话号码都有标准模式,而为了统计有没有重 ...
- redis其他问题
如何解决redis高并发客户端频繁time out? 现在业务上每天有5亿+的请求,平时redis的操作在2K+每秒左右.到了高峰有3K+,这时候客户端就会频繁的报connect time out的异 ...
- windows命令行编码与nodejs编码格式冲突的解决方式
今天写一个工具,由于大部分人使用的机器都是windows,在和nodejs结合的时候出问题了. win命令行的编码格式是gbk,而nodejs支持的编码只有:utf8 ascii和base64,必须让 ...
- linux下关于程序性能和系统性能的工具、方法
观察性能/状态的方法:top free netstat /pro/目录下的信息 其中/pro/meminfo下的信息相当丰富 ------------------------------------- ...