获得某个iframe页面某个元素的值

在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>
时间: 2024-10-05 04:55:44

获得某个iframe页面某个元素的值的相关文章

跨iframe页面访问元素

// 父页面访问iframe子页面 // 标准浏览器 document.getElementById("iframe1").contentDocument.getElementById("div1").style.background = 'red'; window.frames['iframe1'].document.getElementById("div1").style.background = 'red'; // IE专用 documen

如何获得iframe中元素的值

在Web开发时,很多时候会遇到一个问题.我在一个页面嵌入了iframe,并且我想获得这个iframe页面某个元素的值.那么该如何实现这个需求呢? iframe1中文本框的值: 在IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById("s").style.color="blue"; 但是这在Firefox下无效.所以,想到在Firefox下用FireBug来调试.

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte

用jQuery在IFRAME里取得父窗口的某个元素的值

收集网上的一些示例: 用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true"); 2.在IFRAME中操作 选中父窗口中的所有单选钮 $(window

获取元素在页面中left,top值(忽略其父级的定位)

函数用到的属性有: element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器 element.offsetParent 返回元素的偏移容器 element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

Java Selenium (十二) 操作弹出窗口 &amp; 智能等待页面加载完成 &amp; 处理 Iframe 中的元素

一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然后遍历, 使用swithcto.window(newwindow_handle)方法. 就可以定位到新的窗口. 测试页面的HTML <html> <head> <title>常见web ui元素操作, 及API使用</title> <script type

使用iframe父页面调用子页面和子页面调用父页面的元素与方法

在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面获取子页面的元素 //jquery方式 $("#iframeId").contents().find("#child1"); //js方式 window.frames["iframName"].document.getElementById(&quo

iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。

实现一个依据iframe页面返回充值卡类型不同,安排不同的input部件. 点击选择弹出一个iframe.点击充值卡数据行.返回1.充值卡类型.2.充值卡id(用的UUID).3.充值卡号(字符串). 遇到的问题是当iframe选择充值卡时,无法获取parent页面input部件value值的change事件. parent页js $("#id_card_type").change(function(){ //事件无法捕获 }); parent页form <form id=&qu

如何获取Iframe的页面控件的值

有时候我们在页面需要使用iframe的方法来引用另一个页面,虽然个人建议不要使用iframe哈,但是有些时候是没得法了才使用的咯,那么在使用的过程中也会遇到某一些问题,我将自己遇到的问题记录下来方便以后的朋友在遇到了此问题少走弯路!!! 假如我首页index.hmtl使用了iframe引用了child.html页面代码如下: <div> <div class="panel panel-default"> <div> <div class=&qu