`

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!

 
阅读更多

转自:http://www.cnblogs.com/liyuxin/archive/2011/10/06/2199931.html

 

query取得iframe中元素的几种方法

 

在iframe子页面获取父页面元素
代码如下:

$('#objId', parent.document);
// 搞定...


在父页面 获取iframe子页面的元素
代码如下:

$("#objid",document.frames('iframename').document)

 

$(document.getElementById('iframeId').contentWindow.document.body).html()

 

有时需要加上延迟,防止iframe里的元素还没有加载完

setTimeout(function(){

var a = $($("#iframeId").contents().get(0)).find("#a");

alert($(a).val());

},500);

 
 显示iframe中body元素的内容。

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

 根据iframename取得其中ID为"testId"元素


$(window.frames["iframeName"].document).find("#testId").html()

 


用JS或jQuery访问页面内的iframe,兼容IE/FF 
注意:框架内的页面是不能跨域的!

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>页面首页</title>  
</head>  
  
<body>  
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>  
</body>  
</html>   
iframe.html 内容:

XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>iframe.html</title>  
</head>  
  
<body>  
<div id="test">www.koyoz.com</div>  
</body>  
</html>  

1. 在index.html执行JS直接访问:

JavaScript代码
document.getElementById('koyoz').contentWindow.document.getElementById

('test').style.color='red'   
通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的

对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .

2. 在index.html里面借助jQuery访问:

JavaScript代码
$("#koyoz").contents().find("#test").css('color','red');   
此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.
 

收集网上的一些示例:
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1. 在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");

2. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");

父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了,如:
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

3.在子窗口中调用父窗口中的另一个子窗口的方法(FRAME):

  parent.frames["Main"].Fun();

  document.getElementById('iframeid').contentWindow.abc();

  注意:建议使用[],这样比较兼容多个浏览器,() 火狐/搜狗/谷歌不兼容。

分享到:
评论

相关推荐

    Jquery取得Iframe中元素的几中方法

    在网页开发中,jQuery 是一个非常强大的 JavaScript 库,它简化了 DOM 操作、事件处理以及动画效果。当涉及到在页面中嵌入 iframe (内联框架) 的情况时,jQuery 提供了一些方法来帮助我们方便地访问和操作 iframe 中...

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

    ### jQuery取得iframe中元素的几种方法 - **获取iframe的body内容**:使用`$(document.getElementById('iframeId').contentWindow.document.body).html()`可以获取到iframe中body元素的HTML内容。 - **通过iframe...

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

    本文将详细讲解如何使用jQuery来取得`iframe`中元素的方法。 首先,我们要明确一点:跨域的`iframe`是无法直接进行DOM操作的,这是浏览器的安全策略,以防止恶意网站对其他网站的页面进行篡改。但如果是同源策略下...

    Jquery方式获取iframe页面中的 Dom元素

    为了获取iframe中的DOM元素,我们可以通过jQuery来实现这一目标。在具体的实现过程中,需要注意iframe中的内容必须和主页面出于同一个域中,否则会受到浏览器同源策略的限制,无法获取到其中的DOM元素。这是因为...

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

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

    JQUERY实现iframe页面切换功能

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作,事件处理,动画设计以及Ajax交互。本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能,以便于创建更丰富的用户...

    jQuery获取iframe的document对象的方法

    这里,`#myframe`是`iframe`的ID,`prop('contentWindow')`返回的是`iframe`的窗口对象,而`window`对象在JavaScript中包含了`document`属性,所以通过`.document`可以获取到`iframe`内部的`document`对象。...

    jquery 跨iframe拖拽

    2. **设置拖拽元素**:在主页面或者IFrame中的某个元素(比如一个div)上,我们需要应用`.draggable()`方法,定义拖动行为。例如: ```javascript $('#draggableElement').draggable(); ``` 这将使`#...

    jquery得到iframe src属性值的方法

    通过以上知识点,可以看到,在实际开发中,若需要从一个iframe中获取src属性值,可以利用jQuery的选择器、attr()方法,以及$(document).ready()等,这些是进行DOM操作和动态获取内容时常用的方法。同时,也需要考虑...

    使用jQuery和ajax代替iframe的方法(详解)

    使用jQuery和ajax代替iframe的主要方法在于:通过JavaScript动态地获取外部HTML内容,并将其插入到当前页面的指定容器中。这种做法可以保持页面的整体一致性,同时避免iframe带来的问题。 具体操作步骤如下: 1. ...

    js与jQuery 获取父窗、子窗的iframe.docx

    ### JavaScript与jQuery获取父窗口与子窗口中的iframe详解 #### 一、引言 在Web开发过程中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在网页中嵌入另一个HTML文档。它允许开发者在一个页面中展示多个...

    Jquery实现iframe功能

    而iframe(内联框架)则是一种在HTML页面中嵌入另一个HTML页面的技术,常用于加载外部内容或者创建多窗口效果。本教程将详细讲解如何使用jQuery来实现iframe的功能。 首先,我们需要在HTML页面中引入jQuery库。通常...

    jquery点击按钮隐藏父页和引用页的iframe

    在网页开发中,有时我们需要实现一种交互效果,即在用户点击特定按钮时,隐藏嵌入在页面中的`iframe`元素。这种效果对于提高用户体验、控制页面布局或在多页面交互场景下尤为有用。本篇文章将深入讲解如何使用`...

    jquery对iframe自适应高度插件

    2. **高度计算**:通过DOM操作获取`iframe`的子元素高度,确保包括了所有可视内容。 3. **动态调整**:将计算出的高度应用于`iframe`的样式,设置其`height`属性,从而实现自适应。 4. **重试机制**:考虑到某些情况...

    使用jquery/js获取iframe父子级、同级获取元素的方法

    在使用iframe时,我们常常需要获取iframe中的元素,或者在iframe中获取父窗口的元素。这种需求的解决方法主要可以借助JavaScript和jQuery来实现。 首先,我们来看如何在父窗口中获取iframe内的元素。如果iframe设置...

    jquery tab 切换页面 支持iframe

    在网页设计中,jQuery Tab是一种常见的用户界面组件,用于实现多面板切换效果,通常用于展示不同的内容区域。当这些内容区域包含外部资源,如网页或应用程序时,我们可能需要使用`iframe`(Inline Frame)来嵌入这些...

    Iframe模拟Jquery.Ajax

    在IT行业中,Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下更新部分网页内容的技术,极大地提升了用户体验。jQuery,作为一个广泛使用的JavaScript库,提供了简单易用的API来实现Ajax...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    jQuery Iframe Transport是jQuery File Upload的一部分,主要解决大型文件或者需要跨域上传时的问题。由于浏览器的安全策略,某些情况下普通的Ajax上传可能无法工作,这时Iframe Transport通过创建一个隐藏的iframe...

Global site tag (gtag.js) - Google Analytics