js实现iframe框架取值的方法(兼容IE,firefox,chrome等)


Posted in Javascript onNovember 26, 2015

本文实例讲述了js实现iframe框架取值的方法。分享给大家供大家参考,具体如下:

为啥世上会有这么多不同的浏览器?每次遇到js/css的浏览器兼容性问题,总是要发出这样的感叹,真希望这些个浏览器公司全部倒下,然后只留下一家(显然这是一个不可能实现的美好愿望),言归正传,看代码吧:

iframe框架内页:

<html>
<head>
  <title>框架内页</title>
</head>
<body>
  <div>
    <input id="txt1" name="txt1" type="text" value="测试" />
  </div>
</body>
</html>

父级类:

<iframe name="frame1" id="frame1" src="frm.html" frameborder="1" height="30"></iframe>
<p>
  iframe1中文本框的值:</p>
<p>
  <input type="button" name="Submit" value="getValue" onclick="getValue()" />
</p>
<script type="text/javascript">
function getValue(){
  var ofrm1 = document.getElementById("frame1").document;
  if (ofrm1==undefined)
  {
    ofrm1 = document.getElementById("frame1").contentWindow.document;
    var ff = ofrm1.getElementById("txt1").value;
    alert("firefox/chrome取值结果为:" + ff);
  }
  else
  {
    var ie = document.frames["frame1"].document.getElementById("txt1").value;
    alert("ie取值结果为:" + ie);
  }
}
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 #Javascript
javascript bom是什么及bom和dom的区别
Nov 26 #Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 #Javascript
Javascript BOM学习小结(六)
Nov 26 #Javascript
js实现延时加载Flash的方法
Nov 26 #Javascript
学习JavaScript设计模式(链式调用)
Nov 26 #Javascript
学习JavaScript设计模式(继承)
Nov 26 #Javascript
You might like
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP实现变色验证码实例
2014/01/06 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
Python命名空间详解
2014/08/18 Python
Python编程中的反模式实例分析
2014/12/08 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
python Django批量导入数据
2016/03/25 Python
python操作excel的方法
2018/08/16 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
国外的一些J2EE面试题一
2012/10/13 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
学生打架检讨书大全
2014/01/23 职场文书
趣味游戏活动方案
2014/02/07 职场文书
新手上路标语
2014/06/20 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
如何写辞职信
2015/05/13 职场文书
绿里奇迹观后感
2015/06/15 职场文书