开幕场景

iframe.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. <a href="javascript:;" onclick="return getIframeDocument()">get iframe input value</a>
  9. <div class="content" id="content">
  10. <iframe scrolling="no" frameborder="0" src="inner.html" class="comnet" name="comnet" id="comnet"></iframe>
  11. </div>
  12. <script type="text/javascript">
  13. function getIframeDocument(){
  14. var iframe = document.getElementById('comnet');
  15. var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  16. if(iframeDocument){
  17. alert(iframeDocument.getElementById('first').value);
  18. }else{
  19. alert("oops!");
  20. }
  21. return false;
  22. }
  23. window.onload=function(){
  24. //取iframe
  25. var iframe = document.getElementById('comnet');
  26. var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  27. if(iframeDocument){
  28. alert(iframeDocument.getElementById('first').value);
  29. }else{
  30. alert("oops!");
  31. }
  32. };
  33. </script>
  34. </body>
  35. </html>

inner.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>this is iframe document</title>
  6. </head>
  7. <body>
  8. <div id="mainright">ddd</div>
  9. <div><input type="text" id="first" value="ccc"/></div>
  10. </body>
  11. </html>

对白一：chrome我有我的要求
首先把上面的两个html放在非host上,也就是用file:///{path}/iframe.html来访问，当然inner.html也要和它在平级目录，你发现javascript不工作，
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

但当他们放到一个站点内它又满血复活.

原因: Chrome会把本地iframe 也当成是跨域

对白二: ie我会72变
在ie6和ie7中对contentDocument不支持，还好ie的版本都支持contentWindow，frames  因此需要下面的代码：

  1. iframe.contentDocument || iframe.contentWindow.document

但ie10(我的电脑只有ie10)和firefox都可以在用file:///{path}/iframe.html来访问。另外如果把上面的js换成

  1. var iframe = window.frames["comnet"];
  2. if(iframe.document){
  3. alert(iframe.document.getElementById('first').value);
  4. }else{
  5. alert("oops!");
  6. }

发现在ie10中，上面的代码在window.onload事件处理函数中是没有任何效果的。是代码有问题吗？但把它们放到getIframeDocument函数中它又可以工作

对白三: firefox我忠贞如一
上面的ie10问题,chrome问题，在firefox上都没问题

ifream爱恨情缘的更多相关文章

  1. Menu与ActionBar的爱恨情仇

    最近在开发一款音乐播放器,在开发过程中遇到了一点小麻烦,通过android API搞清楚了Menu与ActionBar的爱恨情仇,写了个小Demo祭奠一下那些年我们陷进去的坑,有不对的地方请大神们批评 ...

  2. web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG，完美解决

    [问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...

  3. CSS中a标签样式的“爱恨”原则

    CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 1 :link 2 :visited 3 :h ...

  4. 注解：大话AOP与Android的爱恨情仇

    转载:大话AOP与Android的爱恨情仇 1. AOP与OOP的区别 平时我接触多的就是OOP(Object Oriented Programming面向对象).AOP(Aspect Oriente ...

  5. 除了love和hate，还能怎么表达那些年的“爱恨情仇”？

    实用英语 帮你全面提高英语水平 关注 童鞋们每次刷美剧的时候,相信都会被CP感满满的男女主角虐得体无完肤吧. 可是,一到我们自己表达爱意或者恨意的时候,却苦于词穷,只会用love, like, hat ...

  6. 对json的爱恨情仇

    本文回想了对json的爱恨情仇. C++有风险,使用需慎重. 本文相关代码在:http://download.csdn.net/detail/baihacker/7862785 当中的測试数据不在里面 ...

  7. String、StringBuilder、StringBuffer的爱恨情仇

    第三阶段 JAVA常见对象的学习 StringBuffer和StringBuilder类 (一) StringBuffer类的概述 (1) 基本概述 下文以StringBuffer为例 前面我们用字符 ...

  8. [转帖]探秘华为（一）：华为和H3C（华三）的爱恨情仇史！

    探秘华为(一):华为和H3C(华三)的爱恨情仇史! https://baijiahao.baidu.com/s?id=1620703498823290828&wfr=spider&fo ...

  9. Tidyverse|数据列的分分合合，爱恨情仇

    Tidyverse|数据列的分分合合,爱恨情仇 本文首发于“生信补给站”Tidyverse|数据列的分分合合,一分多,多合一 TCGA数据挖掘可做很多分析,前期数据“清洗”费时费力但很需要. 比如基因 ...

随机推荐

  1. 02JavaScript用法

    前言: 介绍一下javascript的最基础语法规范和用法. HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...

  2. 初识Java——第一章 初识Java

    1. 计算机程序: 为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合. 2. JAVA相关的技术:      1).安装和运行在本机上的桌面程序      2).通过浏览器访问的面向 ...

  3. Elasticsearch 6 重要参数配置

    采用zip或tar.gz的二进制包方式安装的ES,需要配置一系列参数,其中重要参数配置如下: 一. ElasticSearch参数配置 1. data和logs路径配置 如果使用.zip或.tar.g ...

  4. 一、linux基本操作

    1.linux界面的切换 DOS界面终端打开:Ctrl+Alt+F1  /F2/F3   退出:Ctrl+Alt+F7 终端的打开与退出 打开:Ctrl+Alt+t   退出:Ctrl+d 2.第一次 ...

  5. [STM32F4][关于看门狗的那些事]

    STM32(stm32f4XX系列)看门狗的总结: 1. 具有两个看门狗外设(独立和窗口)均可用于检测并解决由软件错误导致的故障:当计数器达到给定的超时值时,触发一个中断(仅适用于窗口看门狗)或产生一 ...

  6. java 用接口实现加减乘除计算器

    class Test{ public static void main(String[] args) { fun i=new fun(); jiafa s1=new jiafa(); jianfa s ...

  7. HDOJ：6333-Problem B. Harvest of Apples(组合数学+莫队算法+逆元）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6333 解题心得: 这个题可以说是十分精彩了,首先推组合数学的公式,其中一个很重要的公式是Cnm = C ...

  8. [HDU6321]Dynamic Graph Matching（DP）

    题意:给定一个n个点的无向图,开始没有边,然后m个操作,每次加边或者删边,每次操作后输出正好k个边的匹配数k=1,2,3,...n/2,n<=10,m<=30000 可以发现,n<= ...

  9. 【8086汇编-Day6】关于loop的实验

    实验内容 因为是要复制代码,所以常规来做是取代码段地址来用,所以把cs值mov给ax,但是这只是临时的,ax之后还有别的用途,那就把指令当作数据来存(把ax值 mov给ds,表示这一段地址用作代码段, ...

  10. JDBC与Java数据库编程基础

    一.JDBC 概述 1.什么是JDBC 称为Java数据库连接,它是一种用于数据库访问的应用程序API,由一组用Java语言编写的类和接口组成,有了JDBC就可以用同一的语法对多种关系数据库进行访问, ...