脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Jquery调用iframe父页面的元素及方法

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

 更新时间：2016年08月23日 15:18:41   投稿：daisy  
对于javascript操作iframe父级页面元素的方法，大家应该都非常清楚了，下面结合当前非常流行的jquery分享一下如何使用jquery查找和操作iframe父级页面元素的实现代码。

一、在iframe中查找父页面元素的方法：

$(‘#id', window.parent.document)

二、在iframe中调用父页面中定义的方法和变量：

parent.method
parent.value

三、实例

父页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" %>
<!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 runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
var hello = 'hello';
function getHelloWorld() {
alert('hello world');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="default" style=" width:200px; height:400px; float:left;">default.aspx</div>
<iframe id="iframeid" src="IFrame.aspx" style=" width:400px; height:400px; float:left;"></iframe>
</div>
</form>
</body>
</html>

子页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %>
<!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 runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
//在iframe中查找父页面元素
alert($('#default', window.parent.document).html());
//在iframe中调用父页面中定义的方法
parent.getHelloWorld();
//在iframe中调用父页面中定义的变量
alert(parent.hello);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="iframe">
IFrame.aspx
</div>
</form>
</body>
</html>

四、总结

Jquery调用iframe父页面中的元素及方法到这就基本结束了，希望对大家的学习和工作能有所帮助。如果有疑问可以留言讨论。

您可能感兴趣的文章:

相关文章

  • 微信小程序bindtap与catchtap的区别详解

    微信小程序bindtap与catchtap的区别详解

    本文主要介绍了微信小程序bindtap与catchtap的区别详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 提高Web性能的前端优化技巧总结

    提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术，非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN，以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。下面跟着小编一起来看下吧
    2017-02-02
  • js函数的引用， 关于内存的开销

    js函数的引用， 关于内存的开销

    函数的引用， 对于内存的开销分析，需要的朋友可以参考下
    2012-09-09
  • javascript中typeof的使用示例

    javascript中typeof的使用示例

    本文为大家介绍下javascript中typeof的使用，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-12-12
  • three.js搭建室内场景教程

    three.js搭建室内场景教程

    这篇文章主要为大家详细介绍了three.js搭建室内场景教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 微信小程序实现搜索框功能及踩过的坑

    微信小程序实现搜索框功能及踩过的坑

    这篇文章主要介绍了微信小程序实现搜索框功能及踩过的坑,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • 当鼠标滑过超链接出现提示框效果实例

    当鼠标滑过超链接出现提示框效果实例

    当鼠标滑过超链接出现提示框效果实例，需要的朋友可以参考一下
    2013-04-04
  • JavaScript错误处理超完整实用指南

    JavaScript错误处理超完整实用指南

    在JavaScript中进行错误处理,最常见的方式就是使用try catch语句,下面这篇文章主要给大家介绍了关于JavaScript错误处理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JSON 数字排序多字段排序介绍

    JSON 数字排序多字段排序介绍

    JSON 数字排序在使用中比较常见，在本文将为大家详细介绍下具体是如何排序的，感兴趣的朋友可以参考下
    2013-09-09
  • JavaScript代码实现txt文件的上传预览功能

    JavaScript代码实现txt文件的上传预览功能

    本篇文章给大家介绍了JavaScript代码实现txt文件的上传预览功能，文字代码相结合的形式给大家介绍的非常详细，需要的朋友参考下吧
    2018-03-03

最新评论