`
slbszq
  • 浏览: 267843 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

js访问iframe中的元素和方法,以及兼容性问题

阅读更多

全局变量

 
var abc;
abc = 3;  <==> window['abc'] = 3;

1.首先,如何访问iframe中的元素?见如下代码:
(1)1.htm源码:
<input  type=button value="test"  onclick="self.frames['a'].document.all.mybutton.disabled=true">  
<iframe  name='a'  src="2.htm" id="iframe2"></iframe>  
(2)2.htm源码
<input  type=button  value="mybutton"  id="mybutton">
<script language=javascript>
function showInfo(){alert();}
</script>
------------------------------------------------
self.frames['a'].document.all.mybutton.disabled 
self.frames['a'].funtionname(param) 
其中 ‘a’是iframe的name,mybutton是button的id。

------------------------------------------------
在1.htm中点击test按钮,可以使2.htm(iframe页面)中mybutton按钮失效.就这么简单,呵呵.如果要调用2.htm中的JS函数这样写:
self.frames['a'].funtionname(param)

在1.htm中调用2.htm中的JS函数:iframe2.showInfo();

 

 

2.我遇到的问题:做一个项目时按照上述方法却无法访问iframe中的元素!!代码就是拷贝过来改变量名得来的,怎么就是不行呢?
后来,发现一点本质的不同:我的iframe页用的不是站内的页面,是指向外站中的url的!
将外站页面存到本站内后,就可以了,呵呵!
也就是说对于iframe中的页,如果是外站的页面,本站是没有对它的控制权的,甚至页中元素也是无法读取访问的.

动态更改iframe的高度
function changeParent(){
            if (frameid1 != "" && parent!=null )

               parent.document.getElementById("frameid1").style.height=document.body.scrollHeight;                
            }

}

**********************************************************************

兼容性问题:

经测试上面方法在IE中都正常,但后来chrome浏览器升级后就无法访问iframe中的方法。

解决办法:

self.frames['a'].funtionname(param)

改为

self.frames['a'].contentWindow.funtionname(param)

**********************************************************************

分享到:
评论

相关推荐

    Jquery调用iframe父页面中的元素及方法

    不过,当iframe和父页面属于同一域时,可以通过JavaScript或jQuery来操作父页面中的元素和方法。本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先,需要明确iframe元素可以被视为一个...

    iframe框架\JS获取iframe元素

    ### iframe框架与JavaScript获取iframe元素详解 #### 一、引言 `iframe`是非标准HTML标签,最初由Internet Explorer浏览器引入并推广,随后被Mozilla等其他浏览器所支持。`iframe`的主要用途是在当前网页中嵌入另一...

    javascript在IE和Firefox中兼容性问题

    总的来说,解决JavaScript的兼容性问题需要对各个浏览器的特性有深入理解,并善于运用各种技巧,如条件注释、特征检测等,以确保代码能在多种浏览器环境中正常工作。同时,使用像jQuery这样的库可以极大地简化兼容性...

    js调用-嵌入iframe

    - **安全与兼容性**:遵循同源策略,确保跨域通信的安全性,并考虑不同浏览器的兼容性问题。 综上所述,"js调用-嵌入iframe"涉及到的主要知识点包括IFrame的基本使用、JavaScript与IFrame的交互以及测试中的注意...

    用js互相调用iframe页面内的js函数

    在网页开发中,有时我们需要在一个页面中嵌入另一个页面,这就是`iframe`元素的作用。...在进行这样的操作时,必须考虑到跨浏览器兼容性问题,对各种浏览器进行充分的测试,确保在所有目标浏览器中都能正常工作。

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

    - **浏览器兼容性**:在进行iframe元素操作时,需要考虑不同浏览器的兼容性问题,某些方法可能在特定浏览器中不被支持。 通过上述方法,可以在父窗口和iframe之间进行灵活的元素操作,提高页面的交互性和用户体验。...

    JS页面跳转和js对iframe进行页面跳转、刷新

    在IT领域,特别是前端开发中,JavaScript(简称JS)被广泛用于实现网页的动态功能,包括页面跳转和对...需要注意的是,在进行页面跳转和刷新操作时,应考虑到用户体验和浏览器的兼容性问题,确保代码的健壮性和可靠性。

    iframe 跨域访问session

    在Web开发中,`iframe` 是一种非常有用的HTML...总的来说,`iframe`跨域访问`session`是一个复杂的问题,需要综合考虑安全性、兼容性和实用性。通过理解上述技术,开发者可以更好地处理这种场景,提供无缝的用户体验。

    jQuery取得iframe中元素的常用方法详解

    在网页开发中,有时我们需要操作或获取嵌套在`iframe`中的HTML元素,这在JavaScript和jQuery中都可以实现。本文将详细讲解如何使用jQuery来取得`iframe`中元素的方法。 首先,我们要明确一点:跨域的`iframe`是无法...

    JS获取iframe内容【简化版】

    - 对于安全性和兼容性方面的问题,在实际开发中还需考虑更多细节。 #### 总结 通过本文介绍的方法,我们可以简单有效地获取到iframe中的内容。这对于实现动态加载数据、构建复杂的Web应用程序等方面具有重要的...

    javascript写的可拖动的iframe

    在HTML代码中,我们需要创建一个`&lt;iframe&gt;`元素,并为其设置一个ID以便于JavaScript访问。例如: ```html &lt;!DOCTYPE html&gt; 主页面 &lt;script src="com.js"&gt; &lt;iframe id="draggableIframe" src="frm....

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

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

    js操作iframe的一些知识

    2. **浏览器兼容性**:不同的浏览器对于Iframe的支持程度不同,特别是老版本的浏览器可能不支持一些新特性,因此在开发时需要考虑兼容性问题。 3. **安全性和用户体验**:在操作Iframe时要注意不要侵犯用户的隐私...

    iframe根据页面内容自适应高度和宽度

    在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。...在处理跨域问题时,第三方库往往能提供更好的兼容性和便利性。

    js实现iframe自适应高度

    1. **获取`iframe`元素**:通过`document.getElementById`或`querySelector`方法找到页面上的`iframe`元素。 ```javascript var iframe = document.getElementById('iframeId') || document.querySelector('...

    拖拽一个iframe中的div 在另一个iframe页面中显示

    6. **安全性和兼容性**:考虑到浏览器的兼容性问题,可能需要使用polyfill库或条件语句来支持旧版本的浏览器。同时,为防止跨站脚本攻击,确保只有可信的源可以发送和接收消息。 标签“源码”和“工具”提示我们...

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一...在实际应用中,还需注意安全性问题和浏览器兼容性问题,以确保功能在各种环境下都能稳定运行。

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

    在现代网络开发中,跨域通信和数据共享是常见的需求,而`iframe`元素常用于实现这样的功能。然而,由于浏览器的安全策略,特别是对于第三方cookie的处理,开发者可能会遇到在特定浏览器如Safari、Opera以及某些使用...

    js中iframe调用父页面的方法.docx

    2. **Chrome浏览器的兼容性问题** 有时在Chrome浏览器中,上述基本方法可能不起作用。这通常是因为安全策略(如同源策略)或者浏览器的限制。确保`iframe`加载的页面与父页面在同一域名下,以避免跨域问题。如果...

    Javascript iframe交互并兼容各种浏览器的解决方法

    尽管它在设计复杂页面时非常有用,但由于浏览器之间的兼容性问题,其内部和外部的交互变得复杂。 - 不同的浏览器对于iframe中的window对象有不同的访问方式。例如,某些浏览器使用window,而某些则使用...

Global site tag (gtag.js) - Google Analytics