开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jquery执行父页面函数

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性之一是能够轻松地执行父页面中的函数。

相关优势

简化 DOM 操作：jQuery 提供了简洁的语法来选择和操作 DOM 元素。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得代码在不同环境中都能正常运行。
丰富的插件生态：jQuery 拥有庞大的插件生态系统，可以轻松扩展功能。

类型

在 jQuery 中，执行父页面函数主要有以下几种方式：

直接调用父页面函数：
直接调用父页面函数：
通过事件委托：
通过事件委托：
通过 iframe 调用：
通过 iframe 调用：

应用场景

跨域通信：在 iframe 中调用父页面的函数，实现跨域通信。
模块化开发：在不同的 JavaScript 文件或模块中调用父页面的函数，实现功能复用。
事件处理：通过事件委托在父页面中处理子元素的事件。

遇到的问题及解决方法

问题：`window.parent` 为 `null` 或 `undefined`

原因：当当前页面不是通过 iframe 加载的，或者当前页面和父页面不在同一个域时，window.parent 可能为 null 或 undefined。

解决方法：

if (window.parent && window.parent !== window) {
    window.parent.parentFunction();
} else {
    console.error('无法调用父页面函数');
}

问题：跨域安全限制

原因：浏览器的同源策略限制了不同源的页面之间的通信。

解决方法：

使用 postMessage API：
使用 postMessage API：
使用服务器中转：通过服务器作为中介，实现跨域通信。

示例代码

假设父页面有一个函数 parentFunction，子页面通过 jQuery 调用这个函数：

父页面 (parent.html)：

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <iframe id="childFrame" src="child.html"></iframe>
    <script>
        function parentFunction() {
            alert('父页面函数被调用');
        }
    </script>
</body>
</html>

子页面 (child.html)：

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="callParent">调用父页面函数</button>
    <script>
        $(document).ready(function() {
            $('#callParent').click(function() {
                if (window.parent && window.parent !== window) {
                    window.parent.parentFunction();
                } else {
                    console.error('无法调用父页面函数');
                }
            });
        });
    </script>
</body>
</html>

通过上述示例代码，子页面可以通过点击按钮调用父页面的 parentFunction 函数。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery刷新当前页面、刷新父级页面

jquery刷新当前页面、刷新父级页面 window.location.reload(); // 刷新当前页面 parent.location.reload(); // 刷新父级页面 opener.location.reload...(); // 刷新父窗口页面（用于单开窗口） top.location.reload(); // 刷新最顶端页面（用于多开窗口）补充常用的知识 window.open(); // 打开窗口 window.close...url可打印当前url console.log(window.location.href) // 打印当前url window.open("http://xx.com", "_blank"); // 从新页面打开

3.4K1 0

jquery定时执行函数_jquery自动提交

setTimeout 用于延时器,只执行一次. setInterval:用于多次执行....$(".box").is(":animated")){ clearInterval(wait); //执行code...alert("动画都已经执行完！")

3.7K2 0

layer执行父窗口ajax方法,layer 弹出层回调函数调用弹出层页面函数

1、项目中用到layer 弹出层，定义一个公用的窗口，问题来了窗口弹出来了，如何保存页面上的数据呢？疯狂百度之后，有了结果，赶紧记下。...2、自己定义的公共页面方法： layuiWindow: function (options) { var defaults = { title: ‘添加菜单’, width: ‘100px’,...options.btn, //只是为了演示 yes: function(){ options.callBack(); }, btn2: function(){ layer.close(); } }); } 3、父页面...} }); 4、子页面方法： //保存数据 function submitForm() { var parentId = $(“#parentId”).val(); var childrenNode...layer弹出层时只显示遮罩层,不显示弹出框问题最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert

3.7K3 0

jQuery页面加载完毕后执行事件

jquery的一种简写形式： alert("页面加载完成！")... onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。...jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。...$(document).ready(function() 只需要在浏览器把所有的HTML放入DOM tree之后就执行js效果，包括在加载外部图片等资源之前。...即当所有链接被鼠标单击的时候，都执行 alert(“Hello World!”); 也就是说页面加载时绑定，真正该触发时触发。

23.1K4 0

PageOffice打开的页面（子页面）回调父页面的函数传值

用于PageOffice浏览器打开的页面（子页面）回调父页面JS函数，此功能有如下用途：可以实现子页面调用父页面的JS函数；可以实现子页面给父页面传参；可以实现子页面更新父页面的局部状态信息；可以实现子页面刷新整个父页面等功能...functionFuncName(paramJson){//此处编写您的js代码return'';//返回值必须是字符串类型}前端代码例如：调用openWindow的页面（父页面）有一个计数器，每次点击子页面中的按钮都回调父页面函数使得这个计数器的值...increaseCount函数回调父页面的updateCount函数。...:function(strErr){if(strErr.indexOf('parentlost')>-1){alert('父页面关闭或跳转刷新了，导致父页面函数没有调用成功！')...;return;}}});}参考链接：POBrowser回调父页面的函数传值|PageOffice开发者中心

1171 0

jquery 等待3秒钟执行函数

setTimeout(function(){$("#div2").hide()}, 3000);

3.1K5 0

解决浏览器差异导致从子页面回到父页面，父页面不刷新的问题

我的问题也是如此，我的需求是从父页面跳转子页面，子页面提交后返回父页面，并且父页面刷新。 ...Android的Chrome浏览器对这个需求就很容易支持，因为他每次页面重新显示的时候，都会刷新整个页面。而IOS的Safari浏览器出现了问题，Safari浏览器会读取缓存，不会重新刷新页面。...总体思路是在子页面返回时，告知父页面刷新。并且只在IOS上执行这个操作，否则Android会刷新两遍。 ...它是在页面显示的时候响应，同时支持Chrome和Safari。 ...} 注意：笔者在利用上述方法时，起初遇到了问题，在Chrome浏览器和Safari浏览器测试通过后，放在IOS手机上运行时发现onpageshow事件并不执行

3.6K2 0

iframe关闭父页面(iframe嵌套https页面)

在主页面中通过iframe标签可以引入其他子页面 <!...window对象 frame.contentDocument 获取子页面的document对象 2、获取父页面子页面可以访问、修改同一个域名的父页面的方法和属性 window.parent/parent...获取当前页面的父页面-iframe所在的页面 parent.window 获取父页面的window属性 parent.document 获取父页面的document属性 window.top 获取打开该页面的父页面...，如果当前页面没有被嵌套到iframe中，window.topwindow window.self=window 安全问题-禁止iframe嵌套网页 //当页面被非同域名iframe嵌套时：嵌套页面网址改变成本页面网址...window.hostname) { window.top.location.href = window.location.href; } } frame跨域调用使用postMessage 父页面

9K1 0

vue父页面给iframe子页面传值

在vue父页面有两个个参数名称和图标，需要把这两个参数传到iframe的地图里面，在地图触发绘点事件的时候，获取到传来的参数并且展示 vue:传值给子页面iframe // 传值给子页面iframe...this.name, }; iframeWindow.postMessage(data, '*'); }, iframe接收父页面的值...-- iframe.html --> // 监听来自vue父页面的消息 window.addEventListener('message', function(event) { const...= event.data; // 在这里处理接收到的消息 console.log('Received message from parent:', data); }); 当父页面中的按钮被点击时...子页面通过监听message事件获取传递的值，并进行相应的处理。这种方法需要父页面和子页面在同一个域名下，否则会因为浏览器的同源策略而导致通信失败。

3.2K2 0

jqGrid 关闭刷新父页面数据

子页面提交方法: function commit(){ var data = $("#pwd").serialize(); $.post("#",data,function(data)...{ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); }) } 父窗口数据刷新再关闭

5K10 0

jquery等待特定元素加载再执行相关函数

jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次...clearInterval(_iIntervalID); } }, _interval); } return this; } 默认是执行...buyGoods_guige_goods").wait(function(){BuyNow();}) .buyGoods_guige_goods是需要等待出现的元素，BuyNow()是出现后需要执行的函数

2.3K2 0

React中父组件执行子组件的函数使用class + onRef写法

在React中,父组件执行子组件的函数的写法如下父组件中添加函数 onRef = (ref) => { this.child = ref } 在使用子组件时 onRef是固定的用法, 在子组件里 componentDidMount(){ this.props.onRef(this) } 父组件执行子组件的函数 submitFun

6.2K2 0

vue子组件调用父组件父页面的方法「建议收藏」

如图：选择城市后，页面重新请求数据！（城市选择是子组件）选择完后不刷新页面，重新调用接口渲染主页面！第一种方法是直接在子组件中通过this....$parent.event来调用父组件的方法父组件 import...$parent.fatherMethod(); } } }; 第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。...父组件 ...$emit('fatherMethod'); } } }; 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法父组件 <

6.6K3 0

jquery在iframe中选中父元素节点

——《新五代史·伶官传序》我们在使用如layui的layer弹窗或者在页面上用别的方式打开的iframe中可能会要获取到父页面的某个元素可以使用： window.parent.$(".layui-laypage-btn...") 这里.layui-laypage-btn是父元素的节点主要是 window.parent这个属性，能返回当前窗口的父窗口

2.8K1 0

jquery调用页面的方法

本文转载：http://www.cnblogs.com/chenxizhang/archive/2009/05/28/1491250.html 有些朋友问到，能不能在jquery代码中调用后台cs页面的服务器方法呢...调用代码与webservice的非常类似 ///这个例子演示了如何调用页面的静态方法 function TestCallPageMethod() { $.ajax({ type:

4.5K2 0

JQuery实现父级选择器(广告实现)

top: 0; text-align: center; cursor: pointer; } jquery

1.8K2 0

jquery 页面滚动事件 scroll()

这里主要就是浏览器内可以看到页面的宽高。获取页面文档的宽度高度 $(document).width(); $(document).height(); ?...获取页面滚动距离 $(document).scrollTop(); $(document).scrollLeft(); 通常一般都是只有设置文档的高度进行滚动，横向滚动不好看，那么下面就来写个竖向滚动的滚动距离示例...页面滚动事件 $(window).scroll(function(){ ...... }) 编写将滚动的$(document).scrollTop()的值打印出来。 ?

13.4K2 0

jquery 获取元素(父节点,子节点,兄弟节点)

1、jquery 获取元素(父节点,子节点,兄弟节点) $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1")....siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); $("#test").find("#test1"); 2、元素筛选 // 以下方法都返回一个新的jQuery

9.3K1 0

【JQuery】JQuery入门——模拟用户分组以及页面换肤

专栏介绍【JQuery】目前主要更新JQuery，一起学习一起进步。本期介绍本期主要介绍JQuery入门——模拟用户分组以及页面换肤文章目录 1....页面换肤 2.1 案例介绍 3. 扩展案例：图片放大 1. 模拟用户分组 1.1 案例介绍使用 jQuery 模拟用户分组，要求如下： 1. 页面加载时显示所有分组的列表项。...页面换肤 2.1 案例介绍提示：使用 css()方法 3.

2.7K2 0

【自然框架】页面里的父类—— （补充）

没想到下午发的《【自然框架】页面里的父类——把共用的东东都交给父类，让子类专注于其他。》启发了热烈讨论，还以为又是一大堆的口水回复呢。...看了回复后的思考： 1、看了大家的回复，我也觉得把权限验证的函数放在PagePermission不太适合，所以我想把它放在另一个地方——UserInfo，就是记录登录人信息的一个类。...树状功能节点页面，这类的也就三个，也可以直接继承System.Web.UI.Page，这样继承的层数不就少了吗。或者给这三个页面单独做一个父类。不过有必要为了减少继承的层数而特意这么做吗？...我觉得继承的一个优点就是可以“被动”执行，就是说不用在子类里面现象的调用函数，而是由父类默默的去做了。...当然这么做也有个缺点，那就是如果不看看父类的代码（或者看说明文档）的话，那么就不知道父类到底做了什么。欢迎大家继续拍板砖，呵呵，这样的讨论氛围我还是很喜欢的。大家觉得呢？

1.3K5 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭