在Web开发时，很多时候会遇到一个问题。我在一个页面嵌入了iframe，并且我想获得这个iframe页面某个元素的值。那么该如何实现这个需求呢？

先来看下演示：

效果演示

 
 

iframe1中文本框的值：

在IE下操作IFrame内容的代码：

document.frames["MyIFrame"].document.getElementById("s").style.color="blue";

但是这在Firefox下无效。所以，想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现：

document.getElementById("MyIFrame").contentDocument.getElementById("s").style.color="blue";

demo代码：

    <div><iframe name="frame1" id="frame1" src="frm.html" frameborder="1" height="60"></iframe></div>  

    <p>iframe1中文本框的值：<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>
 iframe页面代码：
<html>

<head>

    <title>框架内页</title>

</head>

<body>

    <div>

        <input id="txt1" name="txt1" type="text" value="欢迎访问www.nowamagic.net" />

    </div>

</body>

</html>

如何获得iframe中元素的值的更多相关文章

  1. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  2. Jquery取得iframe中元素的几种方法（转载）

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  3. jquery取iframe中元素

    采取方法: $("#iframe_path").contents().find(".select_path_hide").val(); DOM方法:父窗口操作I ...

  4. [浪风转载]Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  5. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  6. js 跨域 Jquery取得iframe中元素的几种方法

    http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...

  7. C#不允许在foreach循环中改变数组或集合中元素的值（注：成员的值不受影响）

    C#不允许在foreach循环中改变数组或集合中元素的值(注:成员的值不受影响),如以下代码将无法通过编译. foreach (int x in myArray) { x++; //错误代码,因为改变 ...

  8. Jquery取得iframe中元素的几种方法

    [jquery]获取iframe中的body元素: $("iframe").contents().find("body").html(); [使用jquery操 ...

  9. webdriver如何定位多层iframe中元素

    在 web 应用中经常会出现 iframe 嵌套的应用,假设页面上有 A.B 两个 iframe,其中 B 在 A 内,那么定位 B 中的内容则需要先到 A,然后再到 B. iframe 中实际上是嵌 ...

随机推荐

  1. RabbitMQ安全相关的网络资源介绍

    无法用guest远程訪问RabbitMQ的的解决方式 Can't access RabbitMQ web management interface after fresh install http:/ ...

  2. 辛星笔记之高质量JavaScript代码书写要点

    首先本文章是http://www.zhangxinxu.com/wordpress/?p=1173 的读书笔记,读者能够自己到鑫旭的空间去阅读原文.这里我对其进行了简化. 可维护的代码的一些要求: ( ...

  3. php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）

    php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...

  4. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  5. thinkphp3.1 缓存配置设置读取

    以下黄字是我用的代码: //设置缓存名为zgg,内容为zongguagua,有效时间60秒 cache('zgg',"zongguagua",60); //读取缓存 if(cach ...

  6. 用Java对CSV文件进行读写操作

    需要jar包:javacsv-2.0.jar 读操作 // 读取csv文件的内容 public static ArrayList<String> readCsv(String filepa ...

  7. Redis tomcat

    http://blog.csdn.net/fu9958/article/details/17325563 http://my.oschina.net/kolbe/blog/618167 http:// ...

  8. css选择器指定元素中第几个子元素

    tr td:nth-child(2){ background-color:gray; } 就是tr当中的td的第二个td的属性 tr:nth-child(2n+0){ background-color ...

  9. 【codeforces 757A】Gotta Catch Em' All!

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  10. 【codeforces 546B】Soldier and Badges

    time limit per test3 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...