父页面调用子页面的function 的小坑

最新推荐文章于 2023-12-26 11:02:41 发布
原创 最新推荐文章于 2023-12-26 11:02:41 发布 · 337 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #js #javascript #html

本文介绍了一种在父页面中调用子页面方法的技巧，通过将一系列操作拆分为两步，先获取iframe的内容窗口，再调用子页面的方法，解决了常见的连贯操作失败的问题。

不少写前端的都会在父页面去拿子页面的方法，网上几乎都是这样：

$("#ifm")[0].contentWindow().iClick();

将这些连成了一长串，我试了半天还是不行，然后我就拆开来用了；

var contentWindow = $("#ifm")[0].comtentWindow;

contentWindow.子页面方法（）；

然后就好用了哈哈

微信小程序关于函数调用数据的小坑，引用fontawesome字体
03-29
function getData() { return [ { "id": 157, "desc": "猪肉五花肉猪肉", "desc2": "好吃不贵好吃不贵！", "level": "level3", "logo": "../../images/wuhuarou.png", "popular": 157, "nodes": null, "price": 10, ...
小程序填坑实录
03-29
小程序中使用Promise 引用npm中的es6-promise即可； 使用下面的函数包裹微信API即可将其转为Promise方式调用： function promise(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { ...
javascript中父、子页面间调用
weixin_30539835的博客
12-09 153
本文主要转自：http://www.360doc.com/content/11/0525/17/6161903_119333834.shtml http://zhidao.baidu.com/question/178864421.html父子页面互相调用的几种方法总结：第一种：采用window.open(),打开一个新窗口 父页面调...
js 解决无法调用子iframe页面的js function
热门推荐
吴名氏的博客
03-18 5万+
说明：我们应当确定子iframe页面js有你需要的function 1.调用子iframe页面js的function：document.getElementById('selfDricingFromPro').contentWindow.function名字;(例如：document.getElementById('selfDricingFromPro').contentWindow.provi...
js 通过contentWindow调用子页面方法报 not a function
liulang1905的博客
05-07 2403
子窗口没有完全加载完就被父及调用了，所以肯定调不到 //使用此方法，当子页面加载完成后执行代码 contentWindow.onload = function(){ myIframe.contentWindow.fulshPage(); }
js获取子页面全局变量及js变量跨域问题
heartOfblack 离开了电脑，我不希望我还有病
09-23 6327
项目中通过iframe内嵌了一个子页面，子页面定义了一些全局变量，父页面需要获取子页面的全局变量，做了一些测试（我的环境IE10和Firefox32.0.3），得出如下结论：   IE下： window.frames['iPage'].变量名   火狐下：window.frames['iPage'].contentWindow.变量名   IE&火狐下：document.getEleme
js 调用父窗口函数-iframe父窗口和子窗口相互的调用方
astraydog的专栏
09-05 2万+
iframe父窗口和子窗口相互的调用方法解决方案[详细][全] 来源:互联网 收集分享:QQ1663551688 　　iframe 父窗口和子窗口相互的调用方法集锦 一、父窗口调用iframe子窗口方法 　　1、HTML语法：　　2、父窗口调用子窗 口：myFrame.window.functionName(); 　　3、子窗品调用父窗 口：parent.functionName(); 　　简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行 　　4、父窗口页面源码：
微信小程序调用wx.getImageInfo遇到的坑解决
10-15
接下来，我们聚焦到核心问题——调用`wx.getImageInfo`时遇到的坑。在尝试获取图片信息时，按照官方文档，图片必须通过HTTPS协议加载。即使在修改了图片源为HTTPS之后，仍然可能出现调用失败的情况。在这种情况下，...
解决微信小程序部分ios机型在onLaunch中调用reLaunch，页面栈无法清空的坑
07-29
对于微信小程序中部分 iOS 机型在 `onLaunch` 中调用 `reLaunch` 后页面栈无法清空的问题，可能是由于异步操作导致的。以下是一种可能的解决方案： 1. 在 `app.js` 中的 `onLaunch` 方法中，将 `reLaunch` 方法放在...
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
weixin_44434938的博客
12-26 7053
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
父页面与layer子页面相互调用
wang_ouyangsima的博客
03-19 2344
父页面： layer.open({ id:'pasgFlowLayer' ,type: 2 ,title:"" ,area: ['600px', '500px'] ,shade: 0 ,maxmin: true ,offset: [ Math.random()*($(window).height()-300) ,Math.random()*($(...
JQuery 主页面调用子页面(<iframe>)中的JS方法，子页面调用主页面的JS方法
houyanhua1的专栏
01-15 2万+
//调用子页面的方法. var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。 childWindow.subFunction(); //调用子页面中的subFunction方法
js子页面调用父页面方法与父页面调用子页方法
weixin_44512123的博客
08-17 3万+
在做项目中都会存有主页面子页面。子页面嵌套中主页面中，主页面有主的方法，子页面有字面的方法，通常的方法是点击主页面选项打开子页面。但是我这里我要从子页面就是房态图，因为主页面和房态中有一些方法是相同，就是说从房态图中打开模态框，同时也可以从主页面打开这个模态框。也是说我这次的问题是如何从主页面中调用子页面中的方法?就想下图所示嘛，模态框已经在房态图中实现了，打开是同样的模态框总不会在主...
iframe遇到的坑，如子父页面元素获取报错，iframe.contentWindow == null等等
张井乙ccccyc的博客
02-02 2万+
新接触了一个用iframe的项目，入门的时候子父页面的元素获取和传值搞得我头晕脑胀，浪费了很多时间。 在此，总结下iframe的一些小知识 子页面获取父页面元素 //js //获取父页面的window window.parent //获取父页面元素 window.parent.document.getElementById("objid")......
contentWindow 获得子页面值
lingxun123456的博客
06-10 916
function selectWorker(){ callback = function(index, layero) { let iframeWin = layero.find('iframe')[0]; iframeWin.contentWindow.submitHandler(index, layero); console.log(iframeWin) console.log(iframeWin.contentWindow.do.
4.iframe子页面与父页面间的方法，属性互相调用
风子的博客
05-18 5929
以下方式亲测可以使用 1.建议一个动态web工程，本人使用的是eclipse，建立两个jsp页面及一个jquery插件，一个是父页面，一个子页面 &amp;amp;amp;amp;lt;%@ page language=&amp;amp;amp;quot;java&amp;amp;amp;quot; contentType=&amp;amp;amp;quot;text/html; charset=UTF-8&amp;amp;amp;quot; p
js父页面调用子页面的方法以及子页面调用父页面的方法
xuanlv_haoshao的博客
05-04 7897
父页面代码：子页面代码：效果如下：测试按钮有效的触发对应页面的方法子页面调用父页面的方法：parent.parentFun();父页面调用子页面的方法：var childWin=$("#testIframe")[0].contentWindow;            childWin.IframeFun();注：testIframe为iframe的id...
微信小程序钱包页面
最新发布
05-30
### 微信小程序钱包页面开发教程及示例代码 在微信小程序中实现钱包页面，通常需要结合支付接口、用户余额查询、交易记录展示等功能。以下是关于如何开发一个完整钱包页面的详细说明。 #### 1. 钱包页面功能模块 钱包页面的核心功能包括： - 用户余额展示 - 支付历史记录列表 - 充值功能集成 - 提现功能（如果适用） 这些功能可以通过调用微信支付接口以及后端服务来实现[^1]。 #### 2. 页面布局设计 使用Flexbox或Grid布局技术可以提高页面布局的灵活性和响应性。对于样式管理，推荐使用CSS预处理器如SASS或LESS，以确保样式的一致性和可维护性[^3]。 以下是一个简单的钱包页面布局示例代码： ```html <view class="wallet-container"> <view class="balance-section"> <text>当前余额：</text> <text class="balance">{{balance}} 元</text> </view> <view class="transaction-list"> <block wx:for="{{transactions}}" wx:key="id"> <view class="transaction-item"> <text>{{item.description}}</text> <text class="amount">{{item.amount}} 元</text> </view> </block> </view> <button bindtap="recharge">充值</button> </view> ``` #### 3. 后端支付接口集成 为了实现充值功能，可以参考微信支付云函数的实现方式。以下是一个简单的云函数示例代码，用于处理支付请求[^4]： ```javascript const cloud = require('wx-server-sdk'); cloud.init(); const tenpay = require('tenpay'); const config = { appid: '微信小程序appid', mchid: '商户号一般是10位', partnerKey: '密钥,可以重设的,最好重设,这里是支付的一个坑', notify_url: '随便填写一个公网可以访问的地址,如百度首页', spbill_create_ip: '127.0.0.1' }; exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const { total_fee } = event; const api = tenpay.init(config); const nonceStr = Math.random().toString(36).substr(2, 15); const timeStamp = parseInt(Date.now() / 1000) + ''; const out_trade_no = "otn" + nonceStr + timeStamp; const result = await api.getPayParams({ out_trade_no: out_trade_no, body: '充值', total_fee: total_fee, openid: wxContext.OPENID }); return result; }; ``` #### 4. 前端逻辑实现 前端需要通过调用云函数来触发支付流程，并监听支付结果。以下是一个简单的前端代码示例： ```javascript Page({ data: { balance: 0, transactions: [] }, onLoad: function () { this.fetchBalance(); this.fetchTransactions(); }, fetchBalance: function () { // 调用后端接口获取余额 wx.cloud.callFunction({ name: 'getBalance', success: res => { this.setData({ balance: res.result.balance }); } }); }, fetchTransactions: function () { // 调用后端接口获取交易记录 wx.cloud.callFunction({ name: 'getTransactions', success: res => { this.setData({ transactions: res.result.transactions }); } }); }, recharge: function () { wx.cloud.callFunction({ name: 'pay', data: { total_fee: 100 }, // 示例金额为1元 success: res => { wx.requestPayment({ ...res.result, success: () => { console.log('支付成功'); this.fetchBalance(); }, fail: () => { console.log('支付失败'); } }); } }); } }); ``` #### 5. 数据库设计 为了存储用户的余额和交易记录，可以在后端数据库中创建相应的表结构。例如，使用MongoDB时，可以设计如下集合： - **users**：存储用户信息，包括`balance`字段。 - **transactions**：存储交易记录，包括`userId`、`amount`、`description`等字段。 #### 6. 测试与兼容性 在开发过程中，需要对不同版本的微信客户端进行测试，确保页面在各种设备上都能正常显示。可以使用微信开发者工具中的多终端模拟功能来完成这一任务[^3]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值