`

关于iframe取值问题以及google浏览器测试

 
阅读更多
html页面

<iframe id="iframe1"
style="width: 100%; display: none; height: 92%; margin-top: 1px;" frameborder="0"></iframe>

向iframe填充页面
$("#iframe1").attr("src",contextPath + "xxx.jsp");


如果需要在html页面中取得xxx.jsp页面的值或调用它里面的方法则使用:

如果是IE浏览器则直接用iframe的id作为对象来取值
如果是谷歌浏览器则用iframe的id作为对象来取值
//iE
iframe1.method01();
iframe1.属性名 ;
//Google
iframe1.contentWindow.method01();
iframe1.contentWindow.属性名 ;


在iframe子页面获取父页面元素

$.('#objld', parent.document);


在父页面获取iframe子页面的元素

$("#objid", document.iframes('iframe').document) 
$(document.getElementById('iframeId').contentWindow.document.body).html() $(document.getElementById('iframeId').contentWindow.document.body).html()


显示iframe中body元素的内容

$("#testId", document.frames("iframename").document).html()



父页面获取iframe中的元素值:

//根据iframe的id获取对象   
var i1 = window.frames['iframeId'];   
//var iframe =window.frames[0];也可以   
//获取iframe中的元素值   
var val=i1.document.getElementById("t1").value  
//根据iframe的id获取对象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//获取iframe中的元素值
var val=i1.document.getElementById("t1").value


在iframe中获取父页面中的元素值:

 
1.var val = parent.document.getElementById("txt1");   
var val = parent.document.getElementById("txt1");


a包含2个iframe分别为b,c,现在从b中获取c中的元素的值:

1.var i1 = parent.window.frames['iframeId'];   
2.var val = i1.document.getElementById("text1").value;  
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;



Google浏览器debug Js代码

1.进入google浏览器页面点击 F12进入debugger界面。

2.点击放大镜 然后再点击页面上的位置 bebugger界面会显示页面的代码。

3.点击console则进入console页面 然后输入页面的属性值 它会把相应的值打印出来。
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的...iFrame 自适应高度是前端开发中需要注意的问题,需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题,并且需要注意浏览器兼容性问题。

    iframe高度自适应,多浏览器兼容

    总结,`iframe`的高度自适应和多浏览器兼容性是前端开发中的常见问题,需要开发者对各种浏览器的特性和限制有深入理解。通过合理的JavaScript代码和良好的编程习惯,我们可以创建出在不同环境下都能正常工作的`...

    iframe自适应高度兼容各主流浏览器

    iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:iFrame的基本概念 iFrame(Inline Frame...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe自适应高度(兼容多种浏览器)

    这里所说的“多种浏览器”包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer等主流浏览器。此外,该解决方案还需要通过实际测试验证其有效性。 #### 二、技术原理 要实现`iframe`自适应高度,关键...

    完美解决iframe跨域问题

    总结,通过理解iframe跨域问题的本质以及各种解决方案,我们可以根据实际需求选择合适的策略。`window.name`跨域通信虽然存在一定的局限性,但在某些场景下能提供一种实用的跨域数据传递手段。在实际开发中,结合...

    jquery通用的iframe弹层插件,兼容主流浏览器

    本文将深入探讨“jquery通用的iframe弹层插件,兼容主流浏览器”这一主题,涵盖jQuery、iframe、前端开发以及浏览器兼容性等相关知识点。 首先,jQuery的核心优势在于它的API设计,它提供了丰富的选择器、DOM操作...

    使用js通过iframe给父窗体传值以及取值

    通过js实现的子窗体与父窗体之间的值传递

    测试iframe

    以上就是关于`iframe`的一些关键知识点,理解并熟练运用这些知识,能帮助开发者在创建交互丰富的网页时做出明智的决策。在实际工作中,需结合具体需求和场景,灵活运用`iframe`,同时关注其潜在的性能和安全问题。

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    上述解决方案已在IE 6、Firefox 3.6.11、Chrome 7.0.544.0以及Safari 5.0.2等版本的浏览器中进行过测试,均能有效解决`iframe`高度自适应的问题。 总之,通过合理利用JavaScript和对`iframe`标签的适当修改,我们...

    Iframe 高度自适应浏览器高度

    在网页开发中,Iframe...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点,实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中,还要考虑到兼容性问题,确保在不同浏览器和设备上都能正常工作。

    测试iframe全

    "测试iframe全"这个标题可能是指一个测试项目或教程,目的是全面理解和应用`iframe`的各种特性和用法。 `iframe`的使用通常涉及到以下几个关键知识点: 1. **基本结构**:`iframe`标签的基本语法是 `&lt;iframe src=...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    本项目提供了一个完整的、经过测试的解决方案,确保在IE6到IE8、Firefox 3.5、Opera以及Google Chrome等主要浏览器中,Iframe的内容能自动调整其高度以适应内部页面的大小。 1. **Iframe高度自适应原理** - 通常,...

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

    然而,不同浏览器对JavaScript操作`iframe`元素的支持方式有所不同,尤其是在处理跨域安全性和兼容性方面。本文将详细介绍如何使用JavaScript在`iframe`框架中获取值,同时兼容IE、Firefox、Chrome等主流浏览器。 ...

    safari,opera嵌入iframe页面cookie读取问题解决方法

    然而,由于浏览器的安全策略,特别是对于第三方cookie的处理,开发者可能会遇到在特定浏览器如Safari、Opera以及某些使用特定内核的搜狗浏览器中无法读取`iframe`内的cookie的问题。这个问题主要源于浏览器对第三方...

    360急速浏览器,iframe等问题导致,右键禁用无效的问题

    360浏览器急速模式下,由于父窗口iframe、浏览器窗口改变大小等原因导致的滚动条部分可视区鼠标右键无法禁用等问题的解决办法:利用div等对象进行遮罩操作(该div对象必须覆盖可视区).

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    Flex项目Google IFrame使用

    然而,在实际应用中,可能会遇到一些问题,比如IFrame内容消失等,这就需要我们深入理解IFrame的工作原理以及如何在Flex中正确使用它。 首先,让我们了解Flex中的IFrame是如何工作的。Flex是基于ActionScript 3的...

    解决iframe中fixed失效的问题

    这种方法需要计算 `iframe` 在页面中的位置以及用户的滚动位置。 3. **CSS Hack**: - 一种常见的技巧是将 `iframe` 的 `position` 设置为 `relative` 或 `absolute`,并将其 `z-index` 设置得很高,使 `fixed` ...

Global site tag (gtag.js) - Google Analytics