JQueryiframe页面操作父页面中的元素与方法

最新推荐文章于 2022-10-25 10:39:47 发布
最新推荐文章于 2022-10-25 10:39:47 发布
阅读量2k 收藏
点赞数
分类专栏： js 文章标签： js jquery w3c html javascript

1）在iframe中查找父页面元素的方法：
$('#id', window.parent.document)

2）在iframe中调用父页面中定义的方法和变量：
parent.method
parent.value

3）实例

1.父页面

[html]  view plain copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>  
  7.     <script language="javascript" type="text/javascript">  
  8.         var hello = 'hello';  
  9.         function getHelloWorld() {  
  10.             alert('hello world');  
  11.         }  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <form id="form1" runat="server">  
  16.     <div>  
  17.     <div id="default" style=" width:200px; height:400px; float:left;">default.aspx</div>  
  18.     <iframe id="iframeid" src="IFrame.aspx" style=" width:400px; height:400px; float:left;"></iframe>  
  19.     </div>  
  20.     </form>  
  21. </body>  
  22. </html>  

2.子页面

[html]  view plain copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>  
  7.     <script language="javascript" type="text/javascript">  
  8.         $(function() {  
  9.             //在iframe中查找父页面元素  
  10.             alert($('#default', window.parent.document).html());  
  11.             //在iframe中调用父页面中定义的方法  
  12.             parent.getHelloWorld();  
  13.             //在iframe中调用父页面中定义的变量  
  14.             alert(parent.hello);  
  15.         });  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.     <form id="form1" runat="server">  
  20.     <div id="iframe">  
  21.         IFrame.aspx  
  22.     </div>  
  23.     </form>  
  24. </body>  
  25. </html>  
凯炫风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html iframe 子页面调用父页面的方法
xuanmu
02-16 315
父页面代码： <!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="javascript" type="text/ja...
iframe父子互调，PostMessage
hmily43的博客
10-22 911
iframe里的js操作父级窗口的dom iframe里的js要操作父级窗口的dom，必须搞懂几个对象： parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）， top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）， self是当前窗口（等价window）， opener是用open方法打开当前窗口的那个窗口； 这样iframe...
使用jquery修改当前页面所在Iframe的相关属性
龙井茶的Sky
05-30 6210
当前页面是在一个iframe中展示的， 现在想通过点击当前页面的一个按钮，将iframe的显示页面给改了，问了下度娘找到了方法 function test() { //获取iframe的id var frameId = window.frameElement && window.frameElement.id || '';
html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法
weixin_42127020的博客
06-03 837
这一个月又没更新博客，唉，懒癌又犯了，今天解决了一个问题，关于两个iframe互相调用jquery函数方法a.html中有两个iframe,如下：b.html中有一个treeview,称为左菜单iframec.html为b.html中treeview点击后显示的数据,就称为右页面iframe。既然两个页面之间都有关系，存在在a.html中，那这两个页面就能互相调用Js方法。ps:如果两个页面之间没...
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
12-10
1）在iframe中查找父页面元素的方法：$(‘#id’, window.parent.document) 2）在iframe中调用父页面中定义的方法和变量：parent.methodparent.value 3）实例 1.父页面 代码如下:<%@ Page Language=”C#” ...
Jquery调用iframe父页面中的元素及方法
11-24
一、在iframe中查找父页面元素的方法： $(‘#id', window.parent.document) 二、在iframe中调用父页面中定义的方法和变量： parent.method parent.value 三、实例 父页面： <%@ Page Language="C#" ...
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
01-19
JQUERY IFRAME下面简单使用Jquery来操作iframe的一些...第三、在iframe中调用父页面中定义的方法和变量：parent.methodparent.valueiframe里用jquery获取父页面body iframe.html 代码如下:<html>[removed]</sc
在Iframe页面中使用jQuery控制parent页面
懒人改变世界
09-06 2400
1、控制parent页面跳转，这个其实用不到jQuerywindow.parent.location.href = "*****";2、调用parent页面的函数，其实也不用jQuerywindow.parent.method(para);3、操作parent的DOM$(".test", window.parent.document).remove();
jQuery子页面调用父页面元素
super的博客
05-17 3762
今天做了一个功能，在子页面完成操作后关闭子页面并刷新父页面内容，这种功能以前也做过很多次，但是每次做完都不记录，也使用过几种方法，比如window.open() 打开，然后子页面 window.parent.document来获取父页面元素。但这次是修改别人的代码， 他的打开方式是用&lt;a&gt; 标签， 这时候用window.parent.document就不好用， 可以使用window.o...
【Jquery】------ JS 实现子级页面调用父级页面中的函数方法及（父级页面调用子级页面中的函数方法） 代码示例
皮皮冰要做大神
09-04 2681
1.父级页面index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法
dianyichi8365的博客
09-27 551
//方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME") { alert('在iframe中'); } //方式二 if (window.frames.length != parent.frames.length) { alert('在iframe中'); } //方式三 if (sel...
html中iframe调用父页面方法和变量
无名程序员
04-24 1331
这篇文章主要是对JQueryiframe页面操作父页面中的元素与方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助 1）在iframe中查找父页面元素的方法： $('#id', window.parent.document) 2）在iframe中调用父页面中定义的方法和变量： parent.method parent.val
浏览器同源策略，及跨域解决方案
周大侠的博客
08-31 1629
一、同源策略 浏览器的同源策略是一种约定，最核心也最基本的安全功能，它限制了来自不同源的 “document” 或脚本，对当前 “document” 读取或设置某些属性。 这个策略是非常重要的，试想下如果没有该策略。那么 a.com 的一段 JavaScript 脚本，可以在 b.com 未导入该脚本的情况下，对 b.com 的页面 进行随意更改，那就很恐怖了。为了防止页面之间发生混乱，浏览器...
JQuery使用iframe子页面操作父页面中的元素与方法
青春不打烊的博客
10-25 1162
1.子页面查找父页面元素。
html子页面调用父页面的方法
热门推荐
zww学习笔记
09-26 2万+
不做过多的介绍了，直接看代码吧。 父页面：<!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="javascript" type="text/javascript"> function sayhello() {
jquery操作iframe的方法：父页面和子页面相互操作的方法
chelen_jak的专栏
09-26 1万+
原文出处：http://blog.csdn.net/wanghaoxu1014/article/details/7937634 今天在弄jquery操作iframe中元素：先由iframe中的子页面b.html给外面的父页面a.html页面传值，再将a.html页面计算机的值放到b.html页面上，这里就用到子页面和父页面相互传值，相互调用更自函数这些功能，这里我用一个简单的例子来介绍一下这
jquery操作iframe的方法：父页面和子页面相互操作（九种情况）
xiaouncle的博客
05-23 1万+
现实开发中难免会遇到子页面、父页面相互操作的情况，由于时不时地会遇到几次（不是一次），所以就整理了一下父子页面相互相互调用常见的九种情况，作为自己的备忘录，同时也希望对大家有帮助。 一、子页面C1操作父页面P（下述三个方法写在子页面C1中） //获取父页面P中控件的值, btnParent1是子页面C1中的按钮 $("#btnParent1").click(function () { ...
JQuery调用iframe父页面元素与方法
最新发布
05-31
可以使用以下代码在iframe中调用父页面元素与方法： 1. 调用父页面元素： ``` $(parent.document).find('#elementID') ``` 其中，`elementID`是父页面中要调用的元素的ID，可以根据情况修改。 2. 调用父页面方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值