jquery获取IFRAME框架页面元素值的代码

例子

   
    $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked", true);

在IFRAME中操作 选中父窗口中的所有单选钮

    $(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的:

    <iframe id="iframe1" src="test.html" height="300" width="700" frameborder="0" scrolling="auto"></iframe></li>

在父页面 获取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获取并操作iframe中的元素来解决问题

  这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

  经过我在网上查资料,找到了JS操作iframe中HTML元素的方法。示例如下。
复制代码

1         function ShowExit() {
2             //获取iframe的window对象
3             var topWin = window.top.document.getElementById("topNav").contentWindow;
4             //通过获取到的window对象操作HTML元素,这和普通页面一样
5             topWin.document.getElementById("exit").style.visibility = "visible";
6         }

复制代码

  说明:第一步,通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面(topPage.htm)所在的iframe对象;第二步,通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象;第三步,通过上一步获取到的window对象来操作iframe框架中的元素,这和操作不在iframe框架中的普通HTML元素是一样的。

  下面是我在重现以及解决这个问题时写的全部代码(布局太丑,但重点是JS方法):

  1.使用iframe框架布局的顶级页面(JS操作iframe中的元素.htm)
View Code

  2.顶部菜单栏页面(topPage.htm)
View Code

  3.左侧导航栏(leftPage.htm)
View Code

  4.需要访问顶部菜单页面元素的主页面(mainPage.htm)
View Code

  5.底部页面(bottomPage.htm)
复制代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>底部页面</title>
 5 </head>
 6 <body>
 7     <div>
 8         底部版权区:这是一个底部的测试页面
 9     </div>
10 </body>
11 </html>

时间: 2025-01-25 02:07:35

jquery获取IFRAME框架页面元素值的代码的相关文章

Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementByI

使用jQuery获取radio/checkbox组的值的代码收集_jquery

checkbox1 checkbox2 checkbox3 checkbox4 checkbox5 checkbox6

javascript 获取iframe里页面中元素值的方法

 本篇文章主要是对javascript获取iframe里页面中元素值的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 IE方法: document.frames['myFrame'].document.getElementById('test').value;   火狐方法: document.getElementById('myFrame').contentWindow.document.getElementById('test').value;   IE.火狐方法:   代码如

javascript 获取iframe里页面中元素值的方法_javascript技巧

IE方法:document.frames['myFrame'].document.getElementById('test').value; 火狐方法:document.getElementById('myFrame').contentWindow.document.getElementById('test').value; IE.火狐方法: 复制代码 代码如下:     function getValue(){          var tmp = '';          if(docume

JQuery操作iframe父页面与子页面的元素与方法(实例讲解)_jquery

JQUERY IFRAME下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS与可以实现. 第一.在iframe中查找父页面元素的方法:$('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法:$(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量:parent.methodparent.value iframe里用jquery获取父页面bod

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

一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 二.在iframe中调用父页面中定义的方法和变量: parent.method parent.value 三.实例 父页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._De

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法_javascript技巧

用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如何用javascript 跨域获取iframe子页面的元素信息?

问题描述 RT,如何用javascript 跨域获取iframe子页面的元素信息?比如我在我的parent.jsp里面,用iframe引入了www.baidu.com作为子页面,那我如何在parent.jsp里面获得百度中,元素名字为test的div指定属性信息?能不能修改?另外,如果通过创建chrome扩展程序的方式,能不能在程序里面获得作用页面中的元素数据? 解决方案 跨域的话想用父页面的js获取iframe里的元素是不可能的.用chrome扩展程序的话是可以的.解决方案二:你的问题这里有答

jquery操作iframe中的元素和js函数

1.jquery操作iframe中的元素(2种方式) var str = $(window.frames["iframe"].document).find("#ljiong").html(); var stk = $("#iframe").contents().find("#ljiong").html(); 2.操作父界面中的元素(header:为某个元素的id) $('#header', parent.document).t