兼容各浏览器的iframe - onlaod事件

本文介绍了一种在不同浏览器环境下确保Iframe加载完成的方法。针对IE及现代浏览器特性,使用readystatechange及onload事件监听,配合后台延迟响应测试,实现跨浏览器的可靠加载检测。

上次工作中,在使用 Iframe+FormSubmit进行无刷新提交时,如果后台返回的数据有延迟,或者浏览器对Iframe内容的更改过慢的话,会遇到onload响应在Iframe内容改变之前触发,这也就导致了我不能获得我所需要的数据。

之后的解决方法是使用Jquery的load事件。

但是总希望自己能够解决这个问题,但是没有实际的后台配合测试,也不知道到底解决了没有,所以先放着下面吧:

当前版本:v0.0 

注:没有实际测试使用,还不知道问题是否解决!!!

 

 1     function load(obj){
 2 
 3         if(document.all){ // 对于IE10- 以下使用readState的值来检测内容是否加载好。
 4             var state = null;
 5             (function check(){
 6                  
 7                 try{
 8                     state = obj.contentWindow.document.readyState;
 9                 }catch(msg){
10                     state = null;
11                 }
12 
13                 if(state == 'complete'){
14                     
15                     alert(2);
16                     return false;
17                 }
18                 window.setTimeout(check,400);
19             })();
20 
21         }else{ // 对于IE11 Edge CH FF 等浏览器直接绑定onload事件进行判断。 
22 
23             obj.onload=function(){
24                 alert(1);
25             }
26 
27         }
28         
29     }

 

调用代码:

1 btn.onclick=function(){
2     document.forms[0].submit(); //表单提交
3     load(ifr);
4 }

 

这次,我通过使用IE自有的onreadystatechange时间结合onload时间一起使用,在配合后台的延迟执行代码,经测试,该版的解决方案,应该可以达到理想的效果:

测试浏览器:

  IE5 : OK

  IE6 : OK

  IE7 - IE11 : OK

  safari 5.1 : OK

  Chrome : OK

       Firefox : OK

       Opera12.10 (最后一版基于poster内核) : OK

当前版本:v1.0

具体代码:

 1 function load(obj,fn){
 2 
 3    obj.isOpen = false;
 4    obj.onreadystatechange=function(){
 5         if(this.readyState == 'complete'){
 6             if(!this.isOpen){
 7                 this.isOpen = true;
 8                 fn && fn();
 9             }
10         }
11     };
12     obj.onload=function(){
13        if(!this.isOpen){
14            this.isOpen = true;
15            fn && fn();
16        }
17     };
18 
19 }

 

PHP代码:

 

1 <?php
2     $v = $_REQUEST['v'];
3     sleep(5);
4     echo 'success';
5 ?>

 

调用方式:

load(ifr,function(){alert(ifr.contentWindow.document.body.innerHTML)});

 

 

 

转载于:https://www.cnblogs.com/HCJJ/p/5493821.html

<script setup> import { ref, onMounted, onlaod } from 'vue'; // 轮播图数据 const banners = ref([]); const loading = ref(true); const openId = ref(''); onLoad((options) => { // 1. 优先从options获取 let urlOpenId = options.openId; console.log("openid",urlOpenId) // 2. 兼容性获取(微信环境备用) if (!urlOpenId) { try { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; urlOpenId = currentPage?.options?.openId || ''; } catch(e) { console.error('兼容性获取参数失败:', e); } } // 3. 处理获取到的openId if (urlOpenId) { openId.value = urlOpenId; uni.setStorageSync('wechat_openid', urlOpenId); console.log('成功获取并缓存openId:', urlOpenId); } else { console.log('未检测到URL中的openId参数'); } }); // 页面挂载时执行核心逻辑(优先级:检查OpenID→授权→加载数据) onMounted(() => { // 尝试从缓存读取 const storedOpenId = uni.getStorageSync('wechat_openid'); if (storedOpenId) { openId.value = storedOpenId; console.log('从缓存读取openId:', storedOpenId); } // 无论是否有缓存都加载轮播图 fetchBanners(); }); // 2. 核心逻辑:检查缓存→无缓存则跳转授权→有授权参数则缓存 const initOpenId = () => { // 2.1 优先读取本地缓存(UniApp跨端存储API) const storedOpenId = uni.getStorageSync('wechat_openid'); const storedToken = uni.getStorageSync('wechat_token'); if (storedOpenId && storedToken) { // 2.2 有缓存:直接赋值使用 openId.value = storedOpenId; token.value = storedToken; console.log('从本地缓存获取到OpenID:', openId.value); return true; // 表示已获取到OpenID } else { // 2.3 无缓存:检查当前URL是否有openId参数(授权回调后会携带) const urlOpenId = getUrlParam('openId'); if (urlOpenId) { // 2.4 有授权参数:缓存到本地(永久有效,除非手动清除) openId.value = urlOpenId; // 若后端返回token,可在此处从URL提取并缓存(示例:getUrlParam('token')) token.value = getUrlParam('token') || ''; uni.setStorageSync('wechat_openid', urlOpenId); uni.setStorageSync('wechat_token', token.value); console.log('从URL提取并缓存OpenID:', openId.value); return true; // 表示已获取到OpenID } else { // 2.5 无缓存且无授权参数:需要跳转授权页 console.log('未找到OpenID,准备跳转授权链接'); return false; // 表示需要授权 } } }; // 图标菜单数据(保持不变) const iconMenus = ref([ { icon: '/static/icons/ServiceHall.png', text: '服务大厅', name: '服务大厅', path: '/pages/WebView/WebView' }, { icon: '/static/icons/IntegrityCulture.png', text: '廉洁文化', name: '廉洁文化', path: '/pages/IntegrityCulture/IntegrityCulture' }, { icon: '/static/icons/IntegrityStandards.png', text: '廉洁标准', name: '廉洁标准', path: '/pages/IntegrityStandards/IntegrityStandards' }, { icon: '/static/icons/ComplaintChannel.png', text: '投诉渠道', name: '投诉渠道', path: '/pages/ComplaintChannel/ComplaintChannel' }, { icon: '/static/icons/ComplainCases.png', text: '投诉案例', name: '投诉案例', path: '/pages/ComplainCases/ComplainCases' }, { icon: '/static/icons/ComplaintRecord.png', text: '投诉记录', name: '投诉记录', path: '/pages/ComplaintRecord/ComplaintRecord' }, { icon: '/static/icons/OnlinComplaint.png', text: '在线投诉', name: '在线投诉', path: '/pages/OnlinComplaint/OnlinComplaint' } ]); // 获取轮播图数据(修复token引用问题) const fetchBanners = () => { loading.value = true; uni.request({ url: '/api/incorruptFront/public/index', method: 'POST', header: { // 仅当token存在时携带Authorization头 ...(token.value ? { 'Authorization': `Bearer ${token.value}` } : {}) }, success: (res) => { if (res.statusCode === 200 && res.data.code === 200) { banners.value = res.data.data.map(item => ({ image: item.imageUrl, title: item.imageTitle, description: item.imageText })); } else { uni.showToast({ title: res.data?.msg || '轮播图数据获取失败', icon: 'none' }); } }, fail: (err) => { console.error('轮播图请求失败:', err); uni.showToast({ title: '网络错误,无法加载轮播图', icon: 'error' }); }, complete: () => { loading.value = false; } }); }; // 导航方法(携带OpenID跳转,确保子页面可使用) const navigateTo = (item) => { if (!openId.value) { uni.showToast({ title: '请先完成微信授权', icon: 'none' }); return; } // 跳转时携带openId参数(子页面可通过getUrlParam('openid')获取) const url = `${item.path}?openid=${openId.value}`; uni.navigateTo({ url, fail: (err) => console.error('页面跳转失败:', err) }); }; </script> 报错:<script setup> import { ref, onMounted, onlaod } from 'vue'; // 轮播图数据 const banners = ref([]); const loading = ref(true); const openId = ref(''); onLoad((options) => { // 1. 优先从options获取 let urlOpenId = options.openId; console.log("openid",urlOpenId) // 2. 兼容性获取(微信环境备用) if (!urlOpenId) { try { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; urlOpenId = currentPage?.options?.openId || ''; } catch(e) { console.error('兼容性获取参数失败:', e); } } // 3. 处理获取到的openId if (urlOpenId) { openId.value = urlOpenId; uni.setStorageSync('wechat_openid', urlOpenId); console.log('成功获取并缓存openId:', urlOpenId); } else { console.log('未检测到URL中的openId参数'); } }); // 页面挂载时执行核心逻辑(优先级:检查OpenID→授权→加载数据) onMounted(() => { // 尝试从缓存读取 const storedOpenId = uni.getStorageSync('wechat_openid'); if (storedOpenId) { openId.value = storedOpenId; console.log('从缓存读取openId:', storedOpenId); } // 无论是否有缓存都加载轮播图 fetchBanners(); }); // 2. 核心逻辑:检查缓存→无缓存则跳转授权→有授权参数则缓存 const initOpenId = () => { // 2.1 优先读取本地缓存(UniApp跨端存储API) const storedOpenId = uni.getStorageSync('wechat_openid'); const storedToken = uni.getStorageSync('wechat_token'); if (storedOpenId && storedToken) { // 2.2 有缓存:直接赋值使用 openId.value = storedOpenId; token.value = storedToken; console.log('从本地缓存获取到OpenID:', openId.value); return true; // 表示已获取到OpenID } else { // 2.3 无缓存:检查当前URL是否有openId参数(授权回调后会携带) const urlOpenId = getUrlParam('openId'); if (urlOpenId) { // 2.4 有授权参数:缓存到本地(永久有效,除非手动清除) openId.value = urlOpenId; // 若后端返回token,可在此处从URL提取并缓存(示例:getUrlParam('token')) token.value = getUrlParam('token') || ''; uni.setStorageSync('wechat_openid', urlOpenId); uni.setStorageSync('wechat_token', token.value); console.log('从URL提取并缓存OpenID:', openId.value); return true; // 表示已获取到OpenID } else { // 2.5 无缓存且无授权参数:需要跳转授权页 console.log('未找到OpenID,准备跳转授权链接'); return false; // 表示需要授权 } } }; // 图标菜单数据(保持不变) const iconMenus = ref([ { icon: '/static/icons/ServiceHall.png', text: '服务大厅', name: '服务大厅', path: '/pages/WebView/WebView' }, { icon: '/static/icons/IntegrityCulture.png', text: '廉洁文化', name: '廉洁文化', path: '/pages/IntegrityCulture/IntegrityCulture' }, { icon: '/static/icons/IntegrityStandards.png', text: '廉洁标准', name: '廉洁标准', path: '/pages/IntegrityStandards/IntegrityStandards' }, { icon: '/static/icons/ComplaintChannel.png', text: '投诉渠道', name: '投诉渠道', path: '/pages/ComplaintChannel/ComplaintChannel' }, { icon: '/static/icons/ComplainCases.png', text: '投诉案例', name: '投诉案例', path: '/pages/ComplainCases/ComplainCases' }, { icon: '/static/icons/ComplaintRecord.png', text: '投诉记录', name: '投诉记录', path: '/pages/ComplaintRecord/ComplaintRecord' }, { icon: '/static/icons/OnlinComplaint.png', text: '在线投诉', name: '在线投诉', path: '/pages/OnlinComplaint/OnlinComplaint' } ]); // 获取轮播图数据(修复token引用问题) const fetchBanners = () => { loading.value = true; uni.request({ url: '/api/incorruptFront/public/index', method: 'POST', header: { // 仅当token存在时携带Authorization头 ...(token.value ? { 'Authorization': `Bearer ${token.value}` } : {}) }, success: (res) => { if (res.statusCode === 200 && res.data.code === 200) { banners.value = res.data.data.map(item => ({ image: item.imageUrl, title: item.imageTitle, description: item.imageText })); } else { uni.showToast({ title: res.data?.msg || '轮播图数据获取失败', icon: 'none' }); } }, fail: (err) => { console.error('轮播图请求失败:', err); uni.showToast({ title: '网络错误,无法加载轮播图', icon: 'error' }); }, complete: () => { loading.value = false; } }); }; // 导航方法(携带OpenID跳转,确保子页面可使用) const navigateTo = (item) => { if (!openId.value) { uni.showToast({ title: '请先完成微信授权', icon: 'none' }); return; } // 跳转时携带openId参数(子页面可通过getUrlParam('openid')获取) const url = `${item.path}?openid=${openId.value}`; uni.navigateTo({ url, fail: (err) => console.error('页面跳转失败:', err) }); }; </script> 报错:index-OoLs438E.js:18 ReferenceError: onLoad is not defined at setup (pages-index-index.1zemKHzx.js:1) at e.setup (index-OoLs438E.js:25) at Hn (index-OoLs438E.js:18) at index-OoLs438E.js:20 at index-OoLs438E.js:20 at H (index-OoLs438E.js:20) at F (index-OoLs438E.js:20) at w (index-OoLs438E.js:20) at ht.l [as fn] (index-OoLs438E.js:20) at ht.run (index-OoLs438E.js:18)
最新发布
08-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值