首页 > 编程语言 >Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行

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

时间:2022-11-23 13:34:06浏览次数:45  
标签:Jquery 元素 代码 Javascript html iframe frames document 页面


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

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

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

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

标签:Jquery,元素,代码,Javascript,html,iframe,frames,document,页面
From: https://blog.51cto.com/u_1236522/5881167

相关文章

  • JavaScript decodeURI() 函数 Url 解码
    定义和用法decodeURI()函数可对encodeURI()函数编码过的URI进行解码。语法decodeURI(URIstring)参数描述URIstring必需。一个字符串,含有要解码的URI或其他要解码......
  • JavaScript encodeURI() 函数 Url编码
    定义和用法encodeURI()函数可把字符串作为URI进行编码。语法encodeURI(URIstring)参数描述URIstring必需。一个字符串,含有URI或其他要编码的文本。返回值URIstring......
  • JavaScript unescape() 函数解码
    定义和用法unescape()函数可对通过escape()编码的字符串进行解码。语法unescape(string)参数描述string必需。要解码或反转义的字符串。返回值string被解码后的一个......
  • JavaScript escape() 函数编码
    定义和用法escape()函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。语法escape(string)参数描述string必需。要被转义或编码的字符串。返回值已编码......
  • 28个Javascript 数组方法提高开发效率
    28个Javascript数组方法清单列表web前端开发 2022-11-2310:05 发表于上海01、Array.map()返回一个新数组,其中包含对该数组中每个元素调用提供的函数的结果。const......
  • 力扣34(java)-在排序数组中查找元素的第一个和最后一个位置(中等)
    题目:给你一个按照非递减顺序排列的整数数组nums,和一个目标值target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值target,返回 [-1,-1]......
  • 使用Pandas把表格中的元素,条件小于0.2的变为0,怎么破?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【北海】问了一个Pandas处理的问题,提问截图如下:原始的代码如下:二、实现过程这里【瑜亮老师】给了一份代码,真......
  • javascript-代码随想录训练营day7
    454.四数相加Ⅱ题目链接:https://leetcode.cn/problems/4sum-ii/题目描述:给你四个整数数组nums1、nums2、nums3和nums4,数组长度都是n,请你计算有多少个元组(i,j,......
  • BZOJ2460-[BeiJing2011]元素
    BZOJ2460Description    相传,在远古时期,位于西方大陆的MagicLand上,人们已经掌握了用魔法矿石炼制法杖的技术。那时人们就认识到,一个法杖的法力取决于使用的矿石......
  • JavaScript对象_Global和案例1_点灯开关
    JavaScript对象_Global:Global:1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();2.方法:encodeURI():url编码decodeURI():url解码encodeUR......