JS实现刷新iframe的方法

目录异步函数1. 回调函数promiseGenerator函数async/await函数回调函数promiseasync await异步函数是js中经常会用到的，它的作用无非就是进行一些异步的操作（处理数据）。那么，常见的异步函数有哪些呢，我们一般又是如何获取异步函数的数据呢？今天这篇文章就是围绕这个问题去写的。 异步函数 一般正常情况下，js中的函数是一个一个地按照顺序来完成的。但是异步函数可以改变执行顺序。不过异步任务必须在同步任务执行结束之后，从任务队列中依次取出执行。 常见的异步函数一共有四类： 回调函数promise函数Generator函数async/await函数 1. 回调函数 回调函数一般是作为某个函数的入参，然后在函数内部执行这个回调函数。常见的回调函数有ajax，setTimeouut定时器类，dom事件回调等。 testA(cb) { cb(); } setTimeout(() => { console.log('这是一个回调函数') }, 100) 缺点： 不能try catch捕获错误, 不能直接return。 promise promise函数是一种特殊的异步函数，里面包含三种状态：pending、fulfilled(resolved)、rejected。pending是promise的初始状态，resolved表示执行完成且成功的状态，rejected表示执行完成且失败的状态。三个状态不可逆转。 Promise本身是同步，then的内容是异步： let promiseFunc = new Promise((resolve, reject) => { // 执行同步代码 resolve(); }).then((res) => { console.log(res) },(err) => { console.log(err); }) Generator函数 Generator 是一个可以暂停执行（分段执行）的函数，函数名前面要加星号，是一个状态机，封装了多个内部状态。 function *myTest() { yield 'I', yield 'am', yield 'queen' } async/await函数 async修饰符加在函数前面，返回一个promise，可以使用then添加回调函数。 await后跟着一个promise或者一个原始类型的值（会自动转成立即 resolved 的 Promise 对象），等待resolve的结果。任何一个await后的Promise发生reject，整个aysnc都会中断，需要try{}catch(err){}来捕获错误。 async function myTest() { let val = await new Promise((resolve) => { resolve(1) }); } 如何获取异步函数的数据 获取异步函数的数据一般分为三种：回调函数，promise和async和await 回调函数 回调函数的这种很简单，就是直接将数据传进回调函数里作为入参即可。 function getData(cb) { let val = 'a'; cb(val); } getData((data) => { console.log(data); // 'a' }) promise 使用promise来处理异步，主要就是利用resolve成功的回调函数，reject失败的回调函数。 let promiseFunc = new Promise((resolve, reject) => { let n = Math.random(); if (n >= 0.7) { resolve(n); } else { reject(`${n}小于0.7`) } }); promiseFunc.then((data) => { console.log(data); // 0.3小于0.7 }) async await async: 把函数变成异步函数。wait是等待异步函数执行完成。其中await一定要写在async里面 async function myTest() { return '我是测试数据' }; async function getData() { let val = await myTest(); console.log(val); // 我是测试数据 } 到此这篇关于js获取异步函数数据的实现的文章就介绍到这了,更多相关js获取异步函数 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

对于自适应高度的代码有很多，可效率什么的考虑进来好代码就不多见了，不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数： 第一种方法：代码简单，兼容性还可以，大家可以先测试下。function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } }最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>这么的这种也是跟上面的解决方法类似的代码经典代码 iFrame 自适应高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 HTML代码：<iframe src="http://www.downcc.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码： <script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script>下面这个兼容性更好一些<script language="javascript" type="text/javascript"> function dyniframesize(down) { var pTar = null; if (document.getElementById){ pTar = document.getElementById(down); } else{ eval('pTar = ' + down + ';'); } if (pTar && !window.opera){ //begin resizing iframe pTar.style.display="block" if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ //ns6 syntax pTar.height = pTar.contentDocument.body.offsetHeight +20; pTar.width = pTar.contentDocument.body.scrollWidth+20; } else if (pTar.Document && pTar.Document.body.scrollHeight){ //ie5+ syntax pTar.height = pTar.Document.body.scrollHeight; pTar.width = pTar.Document.body.scrollWidth; } } } </script> <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> </iframe> 另一种情况的iframe解决方案（超简单） 重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问！”(实际上这是因为Js的跨域问题导致拒绝访问的) 之前自己也碰到过这个问题，为了得到答案去网上搜索，发现有不少人也遇到了这样的问题，现在就把解决方法共享一下 1、建立一个bottom.js的文件，然后输入下面的代码（只有两行哦）parent.document.all("框架ID名").style.height=document.body.scrollHeight; parent.document.all("框架ID名").style.width=document.body.scrollWidth;这里的 框架ID名 就是Iframe的ID，比如：<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME> 2、给你网站里所有的被包含文件里面每个都加入<script language = "JavaScript" src = "bottom.js"/></script>3、OK，收工！ 在WINXP、IE6下面测试通过。很简单吧！ 实现 iframe 的自适应高度 实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 <script type="text/javascript"> //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 //定义iframe的ID var iframeids=["test"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide="yes" function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids); if (dyniframe && !window.opera) { dyniframe.style.display="block" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe.height = dyniframe.contentDocument.body.offsetHeight; else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE dyniframe.height = dyniframe.Document.body.scrollHeight; } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display="block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload=dyniframesize </script> 第三中方法批量iframe自适应：工作中遇到iframe随所含内容自适应高度的问题，以前在网上看到过类似问题的解决方法，于是搜索一下，找到了一个比较完整的能够兼容浏览器的解决方法，省得自己写了。虽然不用自己写，思路还是要明白，基本上就是取得iframe属性src所指定的包含文档中内容的高度，然后用来设置iframe自身的高度，在iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置，省时省力，如果确定页面中全部iframe都需要自适应高度，直接取得iframe数组给代码，就连ID都不用自己写了，完成程序搞定。（代码贴上来：）<script language="javascript"> //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 //定义iframe的ID var iframeids=["test"]; //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide="yes"; function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display="block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape

该文也可以说是一个iframe自适应大小的折中解决办法。iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。解决办法：采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。具体实现代码：父页面：<script type="text/javascript">function SetCwinHeight(){ var H=$("#myiframe").contents().find("meta").attr("content"); alert(H); $("#myiframe2").height(H);}</script><body style="overflow:auto;"><iframe id="myiframe" src="xx.html" onLoad="SetCwinHeight()"></iframe></body><script type="text/javascript">function SetCwinHeight(){ var H=$("#myiframe").contents().find("meta").attr("content");alert(H);$("#myiframe2").height(H); }</script><body style="overflow:auto;"><iframe id="myiframe" src="xx.html" ></iframe></body></html>子页面：Html代码<meta content="800px">运行原理： 父页面读取子页面中meta的字段值来设置iframe的高度额外说明：当iframe 的高度小于内容高度时，如果父窗口的BODY 的overflow:auto，则会出现2个垂直滚动条，iframe的垂直滚动条和父窗口的滚动条；如果这时，BODY 的overflow:hidden，则只会出现iframe的垂直滚动条，但是，iframe的内容显示不完。

有时候业务需要做大写【一二三四五六七八九十】的标题，那对于js普通的数据结构排序是按【0123456789】。所以我们需要做一些数字的转换，实现小写转大写才能满足业务需求。js实现数字转大写//阿拉伯数字转大写，整数转大写 const numToCapital = (num, type = '') => {   if (!num) return 0   const strNum = Number((num + '').replace(/[,，]*/g, '')) + '' // 记录字符   num = parseInt(Number(strNum)) // 转为整数，   let capitalAr = '零一二三四五六七八九十'   let unitAr = ['十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千']   if (type) {     capitalAr = '零壹贰叁肆伍陆柒捌玖拾'     unitAr = ['拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟'] // 单位   }   const resultAr = [] // 记录结果，后边json.in就可   let index = strNum.length - 1 //记录位数   let idx = 0 // 记录单位   let percent = 10   const turnNum = (num, percent, index) => {     const unit = num / percent     const capital = capitalAr[Number(strNum[index])]     if (unit < 1) {       resultAr.push(capital)       // 出现11【一十一】这种情况       if (Number(strNum[index]) === 1 && (strNum.length === 2 || strNum.length === 6 || strNum.length === 10)) {         resultAr.pop()       }       return false //结束递归     } else {       if (capital === '零') {         // 万和亿单位不删除         if (!['万', '亿'].includes(resultAr[resultAr.length - 1])) {           resultAr.pop()         }         // 前面有零在删掉一个零         if (resultAr[resultAr.length - 1] === '零') {           resultAr.pop()         }       }       resultAr.push(capital)       // 过滤存在【零万】【零亿】这种情况       if (['万', '亿'].includes(resultAr[resultAr.length - 2]) && capital === '零') {         resultAr.pop()       }       // 过滤【1亿万】这种情况       if (resultAr[0] === '万' && resultAr[1] === '亿') {         resultAr.shift()       }       // 末尾【零】删掉       if (resultAr[0] === '零') {         resultAr.pop()       }       resultAr.push(unitAr[idx++])       turnNum(num, percent * 10, --index)     }   }   turnNum(num, percent, index)   return resultAr.reverse().join('') } // console.log(numToCapital(1512345672, 'capital')) // 壹拾伍亿壹仟贰佰叁拾肆万伍仟陆佰柒拾贰 console.log(numToCapital('125,0000,0000')) //一百二十五亿 console.log(numToCapital('10,0000')) //十万 console.log(numToCapital('12,0000')) //十二万 console.log(numToCapital('10,0010')) //十万零一十 console.log(numToCapital('100,1000', true)) //壹佰万壹仟 console.log(numToCapital('0010')) //十

谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。如果iframe的高度没有确定，那将是初始的高度。iframe是网页中的一部分，其大小还要受到网页的限制，设置最高可以使用height="100%"。基本上解决iframe超出的高度都是增加了滚动条来实现的，很简单，如果你iframe中的信息超出了一屏幕，你就必须使用滚动条了。开始用的时候还不行，后来发现是因为js跨域问题，没有权限。后来设置了window.document.domain 就可以了，用的是jquery代码２方法。跨域下的iframe自适应高度跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。a.html中包含iframe:<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>在c.html中加入如下代码：<iframe id="c_iframe" height="0" width="0" src="http://www.a.com/agent.html" style="display:none" ></iframe><script type="text/javascript"> (function autoHeight(){ var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth); var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); var c_iframe = document.getElementById("c_iframe"); c_iframe.src = c_iframe.src+"#"+b_width+"|"+b_height; })();</script>最后，agent.html中放入一段js:<script type="text/javascript"> var b_iframe = window.parent.parent.document.getElementById("Iframe"); var hash_url = window.location.hash; if(hash_url.indexOf("#")>=0){ var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; b_iframe.style.width = hash_width; b_iframe.style.height = hash_height; }</script>agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制）超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错地方了哦。下面是其他两种方法：iframe代码，注意要写ID<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>jquery代码１：//注意：下面的代码是放在test.html调用$(window.parent.document).find("#main").load(function(){var main = $(window.parent.document).find("#main");var thisheight = $(document).height()+30;main.height(thisheight);});jquery代码２：//注意：下面的代码是放在和iframe同一个页面调用$("#main").load(function(){var mainheight = $(this).contents().find("body").height()+30;$(this).height(mainheight);});第二种有效，不过要注意一点是，增加的JS要写在iframe下面，放在头部是测试没有效果。测试代码：<iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist"frameborder="0" width="100%" scrolling="no" height="100%"></iframe><script type="text/javascript">//注意：下面的代码是放在和iframe同一个页面调用,放在iframe下面$("#mainframe").load(function () {var mainheight = $(this).contents().find("body").height() + 30;$(this).height(mainheight);});</script>

应该很多人都用过jquery.qrcode来生成二维码，生成代码确实很简单demo代码如下<!DOCTYPE html> <html> <head> <title>basic example</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <!--<script type="text/javascript" src="../jquery.qrcode.min.js"></script> --><script type="text/javascript" src="../src/jquery.qrcode.js"></script> <script type="text/javascript" src="../src/qrcode.js"></script> <p>Render in table</p> <div id="qrcodeTable"></div> <p>Render in canvas</p> <div id="qrcodeCanvas"></div> <script>     //jQuery('#qrcode').qrcode("this plugin is great");     jQuery('#qrcodeTable').qrcode({         render  : "table",         text    : "http://jetienne.com"     });      jQuery('#qrcodeCanvas').qrcode({         text    : "http://jetienne.com"     });  </script> </body> </html>调用了三个js脚本，jquery.js、jquery.qrcode.js 和qrcode.js 。jquery当然是少不了的了，后两个可以在项目src目录下找到，应该是项目的源文件。 也可以包含一个压缩文件来代替jquery.qrcode.min.js调用代码只有三行，真的很简洁，但是问题也随之而来，二维码容错怎么设置？ 这个参数是二维码里最重要的参数。我们的终端都可以清晰的显示二维码，为了让用户扫码更快，我们都选用的最低容错级别。而jquery.qrcode很明显用的是高甚至是最高的容错（对比草料）。没办法只能阅读源码了//jquery-qrcode/src/jquery.qrcode.js     $.fn.qrcode = function(options) {         // if options is string,          if( typeof options === 'string' ){             options = { text: options };         }         // set default values         // typeNumber < 1 for automatic calculation         options = $.extend( {}, {             render      : "canvas",             width       : 256,             height      : 256,             typeNumber  : -1,             correctLevel    : QRErrorCorrectLevel.H,//原来在这里默认了最高级别 吼吼                         background      : "#ffffff",                         foreground      : "#000000"         }, options);//jquery-qrcode/src/qrcode.js //--------------------------------------------------------------------- // QRErrorCorrectLevel //--------------------------------------------------------------------- //容错级别对象 var QRErrorCorrectLevel = {     L : 1,     M : 0,     Q : 3,     H : 2 };看了上面的代码明白了，还有一个容错参数correctLevel，记不住QRErrorCorrectLevel 对象的话，直接配0 1 2 3数值就行，看你的需求了//那么我的项目应该这么配置 jQuery('#qrcodeCanvas').qrcode({         render      : "canvas",         width       : 256,         height      : 256,         typeNumber  : -1,         correctLevel    : 1     });