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

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

 
阅读更多

 

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

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

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


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

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

$(document.getElementById('iframeId').contentWindow.document.body).html()
 
 显示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");

 

分享到：
| 【转】使用FtpClient类实现FTP文件上传下 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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实现iframe功能

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

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

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

    jquery对iframe自适应高度插件

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

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

    在iframe内部，可以通过window.parent来引用父窗口的window对象，进而使用document.getElementById()来获取父窗口中元素的引用，例如： ```javascript window.parent.document.getElementById("父窗口的元素ID")....

    jQuery判断iframe中元素是否存在的方法

    总的来说，使用`jQuery`判断`iframe`中元素是否存在是通过获取`iframe`的`window`和`document`对象，然后像操作主页面那样使用`jQuery`选择器进行检查。这为开发者提供了便利，使得能够轻松地与`iframe`内的DOM进行...

    jquery tab 切换页面 支持iframe

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

    jquery 查找iframe父级页面元素的实现代码

    jQuery提供了一种机制可以操作iframe中的DOM元素。通常情况下，因为浏览器的同源策略，我们无法跨域访问iframe中的内容。但是，在同一域内，我们可以通过jQuery来操作iframe中的页面元素。通过选择器可以访问并操作...

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

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

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

    总结来说，这个“jquery通用的iframe弹层插件，兼容主流浏览器”是前端开发中的一个重要工具，它利用jQuery简化了跨浏览器的iframe弹层实现，并考虑了各种兼容性问题，提供了一种便捷的方式来展示和交互外部内容。...

Magicbox
Global site tag (gtag.js) - Google Analytics