JQuery操作iframe父页面与子页面的元素与方法

JQuery操作iframe父页面与子页面的元素与方法

更新: 2011-05-05 来源: 互联网 字体:【大 中 小】

-

JQUERY IFRAME

下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。

第一、在iframe中查找父页面元素的方法: $(‘#id‘, window.parent.document)

第二、在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox")

第三、在iframe中调用父页面中定义的方法和变量: parent.method parent.value

iframe里用jquery获取父页面body

iframe.html

 1 <html>
 2 <script src=‘jquerymin.js‘></script>
 3 <body id=‘1‘>
 4     <div>it is a iframe</div>
 5 </body>
 6 <script>
 7     $(document).ready(
 8         function(){
 9         var c = $(window.parent.document.body)
10
11     //麻烦的方法: var c = $($(window).eq(0)[0].parent.document).find(‘body‘); ,忘了可以用前面的方法了
12         alert(c.html());
13         }
14     );
15 </script>
16 </html>

content.html

<html>
    <script src=‘jquerymin.js‘></script>
<body id=‘fa‘>
    <iframe src=‘iframe.html‘ width=‘100‘ height=‘100‘></iframe>
        <br>
        <br>
        <br>
     <div id=‘mydiv‘>content iframe</div>
</body>
<script>
    function a()
    {
        alert(1);
    }
    alert($(document).text());
    </script>
</html>


jquery、js调用iframe父窗口与子窗口元素的方法

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

$("#objid", parent.document)

2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames(‘iframename‘).document)

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

indow.parent.document.getElementByIdx_x("元素id");

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

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

5.子类iframe内调用父类函数:

window.parent.func();

JQuery操作iframe父页面与子页面的元素与方法

时间: 2024-08-23 23:53:49

JQuery操作iframe父页面与子页面的元素与方法的相关文章

JQuery调用iframe父页面元素与方法

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

Jquery父页面和子页面的相互操作

//父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $("iframe").contents().find("#Sava").click(); //子页面调用父页面Update()函数 parent.Update(); //子页面获取父页面Id为Name的Dom元素的value值 parent.$("#Name").

转:iframe加载的子页面里面获取父级元素窗口以及元素的高度

iframe里的js要操作父级窗口的dom,必须搞懂几个对象: parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe) self是当前窗口(等价window) 父级页面:index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>父窗口<

使用iframe父页面调用子页面和子页面调用父页面的元素与方法

在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面获取子页面的元素 //jquery方式 $("#iframeId").contents().find("#child1"); //js方式 window.frames["iframName"].document.getElementById(&quo

Iframe父页面与子页面之间的相互调用

iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT

Iframe父页面与子页面之间的调用

专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象.

vue引入iframe的父页面向子页面传递数据

父页面 <template> <div> <el-button @click='btn(index)' :class="{'active':activeName2==index}" v-for="(item,index) in list" :key="index"> {{item.label}} </el-button> <iframe-tab :assid="assid"

easyui dialog iframe模式,dialog 父级页面调用子页面(iframe)的方法

var content = '<iframe id="iframe1" name="iframeuuid" src="' + url + '" width="100%" height="98%" frameborder="0" scrolling="no"></iframe>';var div = document.createElement(

jQuery操作iframe子页中元素代码实例

jQuery操作iframe子页中元素代码实例:本章节介绍一下如何在父页面中操作iframe子页面中的元素,希望能够给需要的朋友带来一定的帮助.一.父页面代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <