`
Sharpleo
  • 浏览: 575574 次
  • 性别: Icon_minigender_1
  • 来自: newsk
社区版块
存档分类
最新评论

js ifram 字窗口与父窗口之间的dom访问

    博客分类:
  • js
阅读更多
今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料
 
下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了
 
DOM方法:
父窗口操作IFRAME:window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document

jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(”:text”);
在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).find(”:text”);

iframe 框架的 HTML:<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”& gt;</iframe>
细心的朋友一下就能理解,原理其实很简单,就是用到了$(DOM对象)转换成jquery对象。


例子:
主页面
<title>主页面</title>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showSubValue(){
//var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML;
//alert(v);

var o = $(window.frames[0].document).find(":div#subdiv1");
alert(o.html());
}
</script>
</head>
<body>
<div id="mainDiv">主页面测试数据</div>
<input type="button" value="查看子页面数据" onclick="showSubValue();"/>
<iframe src="sub.html" width="300" height="300"></iframe>
</body> 
</html>

子页面:
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<title>子页面</title>
<script type="text/javascript">
function showMainValue(){
//dom方式
//var v = window.parent.document.getElementByIdx_x("mainDiv").innerHTML;
//alert(v);

//window.parent.document.getElementByIdx_x("mainDiv").innerHTML = "修改后的主页面数据";


//jquery方式
var o = $(window.parent.document).find(":div#mainDiv");
alert(o.html());
}
</script>
</head>
<body>
<div id="subdiv1">子页面测试数据</div>
<input type="button" value="显示父页面数据" onclick="showMainValue();"/>
</body>
</html> 
分享到:
评论

相关推荐

    demo_DEMO_子页面刷新父页面iframe_

    1. **使用window.parent对象**:在子页面的JavaScript代码中,我们可以访问到`window.parent`对象,它是对父窗口的引用。因此,可以直接调用`window.parent.location.reload()`来刷新父页面。这种方法简单直接,但...

    frame之间以及子页面和父页面间参数传递

    在JSP中实现`frame`之间或子页面与父页面之间的参数传递主要通过JavaScript来完成。下面将详细介绍几种常见的实现方式: 1. **直接访问DOM元素**: - **从父页面访问子页面**: 在父页面中可以通过`document....

    js操作iframe的一些知识

    这个“js操作iframe的一些知识”主题涵盖了如何利用JavaScript与iframe进行交互,包括创建、访问、修改以及通信等多个方面。下面我们将深入探讨这些关键知识点。 1. **创建iframe**:首先,你需要在HTML中声明一个...

    Iframe获取父页面的变量和控件

    在网页开发中,有时我们需要在一个页面(子页面)中访问另一个页面(父页面)的数据或控制元素,这种情况下,`Iframe` 提供了一个解决方案。本文将深入探讨如何通过 `Iframe` 获取父页面的变量和控件。 首先,我们...

    iframe 的用法与注意事项

    - 使用`window.frames`数组可以直接访问`iframe`的窗口对象,从而获取到整个DOM模型,包括其内部的函数和变量。例如,`ifr_window.document.body.innerHTML`可以获取`iframe`内的`body`元素的内容。 3. **加载状态...

    jquery操作 iframe的方法

    通过在jQuery选择器中指定父窗口的document.body作为上下文(context),可以实现跨窗口的DOM操作。例如,若要在名为"mainiframe"的iframe中找到一个ID为"someID"的元素,并修改其HTML内容,可以使用$("#mainiframe...

    jQuery取得iframe中元素的常用方法详解

    5. **使用jQuery在`iframe`中操作父窗口的元素**: - 在父窗口中操作`iframe`中的元素: ```javascript $(window.frames["iframe1"].document).find("input:radio").attr("checked", "true"); ``` - 在`iframe`...

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    这样的需求通常出现在需要创建弹出窗口或对话框的场景,其中用户可以与特定的内容进行交互,而不会被其他元素遮挡。同时,还需要能够将页面上的数据传递到这个弹出的`div`页面中。 首先,理解`iframe`的基本概念至...

    jquery得到iframe src属性值的方法

    `find("#iframe_id")`进一步在父窗口的DOM中查找具有`id`为`iframe_id`的`iframe`元素。`attr("src")`则是获取该`iframe`的`src`属性值。最后,`var dk`变量存储了`src`属性的值,并通过`alert(dk)`弹出框显示出来。...

Global site tag (gtag.js) - Google Analytics