`

jquery与iframe（我自己看的）

 
阅读更多

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");

分享到：
| 草，js闭包循环（自己留着看的）
评论
发表评论

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

相关推荐

    JQUERY实现iframe页面切换功能

    本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户体验和更高效的页面加载策略。 首先，我们需要理解iframe的基本概念。Iframe（Inline Frame）是HTML中的一个元素，它允许我们在...

    jquery 跨iframe拖拽

    本篇文章将详细探讨"jquery 跨iframe拖拽"这一主题，该技术允许用户在不同的IFrame之间进行元素的拖放操作，这对于构建多窗口、多面板的Web应用尤其有用。 首先，我们要理解IFrame（内联框架）的概念。IFrame是一种...

    jquery.iframe-transport.js包

    jquery.iframe-transport.js包

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

    《jQuery核心库与扩展应用详解》 在IT领域，JavaScript库jQuery无疑是一个极其重要的存在，以其简洁的API和强大的功能，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。本篇将深入探讨jQuery的核心库...

    jquery iframe动态添加删除tab选项卡

    jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...

    jquery对iframe自适应高度插件

    总之，“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具，它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件，可以避免手动计算和调整`iframe`...

    Jquery实现iframe功能

    需要注意的是，由于同源策略的限制，如果iframe加载的内容与包含它的页面不在同一域名下，我们可能无法直接访问或修改iframe内的内容。这是一条重要的安全策略，防止恶意网站获取或篡改其他网站的数据。 另外，...

    jquery.iframe-transport.js

    jquery.iframe-transport.js

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

    首先，需要明确iframe元素可以被视为一个小型的浏览器窗口，它有自己的文档对象模型（DOM）。要与iframe中的DOM交互，需要通过iframe的window属性来访问。iframe的window属性实际上指向的是iframe内容的window对象。...

    Iframe模拟Jquery.Ajax

    5. **通信机制**：使用`window.postMessage`方法实现Iframe与主页面间的通信。这个方法允许跨窗口的数据传递，即使它们来自不同的源。发送端使用`postMessage`发送数据，接收端通过`message`事件监听数据。 6. **...

    jquery tab 切换页面 支持iframe

    6. **跨域问题**：注意，由于浏览器的安全策略，`iframe`加载的页面必须与父页面同源，否则可能会遇到跨域限制。如果需要加载跨域内容，可以尝试使用`CORS`或其他解决方案，但这需要后端服务器的支持。 通过以上...

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

    在提供的压缩包文件中，"jquery_点击按钮_隐藏父页-引用页的iframe"可能包含了示例代码或演示页面，你可以参考这些资源来进一步理解和实践上述步骤。通过熟练掌握`jQuery`的用法，你可以创建出更多复杂且富有交互性...

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

    下面详细介绍如何使用jQuery和ajax代替iframe，并说明其优势。 首先，让我们理解jQuery和ajax的基本概念。jQuery是一个快速、简洁的JavaScript库，它通过一个统一的接口简化了HTML文档遍历、事件处理、动画和Ajax...

    Jquery实现iframe弹出层，简单实用

    这里我们使用`.show()`和`.hide()`方法来控制弹出层的显示与隐藏，以及`.attr()`来动态设置iframe的`src`属性： ```javascript $(document).ready(function() { // 打开弹出层 function openPopup(url) { $("#...

    前端项目-jquery.iframe-transport.zip

    前端项目-jquery.iframe-transport,jQuery plugin that implements an iframe transport so that ajax calls support the uploading of files using standard HTML file input fields

    jQuery内嵌iframe导航菜单

    6. **安全考虑**：需要注意的是，由于同源策略的限制，只有当iframe加载的内容与包含它的页面在同一域名下时，才能进行跨窗口通信。否则，你只能读取到iframe的基本信息，如`src`属性。 通过以上步骤，你可以创建一...

    两个jquery实现iframe多标签页例子

    在这个“两个jquery实现iframe多标签页例子”中，我们将探讨如何利用jQuery来创建具有动态切换功能的多标签页，并在每个标签页内嵌入iframe，以展示不同的Web内容。 首先，`iframe`（inline frame）是一种HTML元素...

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

    当涉及到在页面中嵌入 iframe (内联框架) 的情况时，jQuery 提供了一些方法来帮助我们方便地访问和操作 iframe 中的元素。本文将详细探讨如何使用 jQuery 在父窗口和 iframe 之间进行交互。 1. **父窗口操作 iframe...

    jquery横排页签Tab+iframe代码示例

    **jQuery横排页签Tab与iframe整合的代码示例** 在网页设计中，页签（Tab）是一种常见的用户界面元素，用于将大量信息组织成不同的类别，提高用户体验。本示例将详细介绍如何使用jQuery实现横排页签，并结合iframe...

    jQuery弹出层 可加载iframe 功能强大 简单易用

    jQuery弹出层是一种常见的网页交互元素，用于在用户与页面交互时显示额外信息或功能，如提示、对话框、表单、或者加载外部内容。在这个特定的案例中，标题和描述提到的“jQuery弹出层可加载iframe”指的是一个利用...

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