Javascript BOM学习小结(六)

前端之家收集整理的这篇文章主要介绍了Javascript BOM学习小结(六)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  所谓的BOM即浏览器对象模型(Browser Object Model)。BOM赋予了JS操作浏览器的能力,即window操作。DOM则用于创建删除节点,操作HTML文档。BOM尚无正式的标准,导致各浏览器对于BOM方法支持各有不同,因此需要具体问题具体对待。

  window对象是BOM的核心,window对象指当前的浏览器窗口。所有JS全局对象、函数以及变量都属于window对象。全局变量是window对象的属性。全局函数是window对象的方法。甚至DOM的document也属于window对象的属性之一,只是大多数情况下可以忽略不写。

  window对象方法:  

  (1)、打开窗口。

  open() 方法可用于打开新窗口。

  语法:window.open(url,name/target,窗口设置,replace)

  该方法的三个参数都是可选的,默认在新页面打开一个空白页。第一个参数可设置要打开窗口的路径。第二个参数规定在何处打开新窗口,也可用于指定窗口的名称。第三个参数设置窗口参数,多个参数可用逗号分隔。如果有第一个参数,后面两个参数可省略,则在新页面打开。第二个参数一般无需设置,如果要规定窗口的参数,则必须有第二个参数,必须为'_blank',或者用'',代替,并且距离屏幕顶部不能为0,否则失效,如果设置了左边距离,顶部可设置为0。最后一个参数规定加载到窗口的URL是在窗口的浏览历史中创建一个条目,还是替换浏览器历史中的当前条目,值为true或false, 值为true时URL替换浏览历史中的当前条目,为false时URL在浏览历史中创建新的条目。

  

下表是一些常用的窗口设置参数:

  实例:点击按钮,在新窗口打开百度首页,宽600,高400,距屏顶0像素,屏左10像素。

function newWin(){ window.open('http://www.baidu.com','_blank','width=,height=,top=,left='); }

  该实例在IE下并不会打开一个自定义的窗口,而是新打开一个标签页。

  如果在脚本中直接打开新窗口,在Chrome和FF下会被当作广告弹窗直接拦截,但是在IE下可以正常显示。360浏览器的极速模式使用的是Chrome的内核,兼容模式则使用的IE内核,360浏览器使用人群相对较多,这里就不描述了,只要其余浏览器正常运行,他就没什么问题。

window.open(); window.open('http://baidu.com');

  实例:获得焦点和失去焦点

//确保新的窗口获得焦点: function openWin(){ var oGet=window.open('','',height='); oGet.document.write('

我是新打开的窗口

'); oGet.focus(); } //确保新的窗口没有获得焦点: function newWin(){ var lose=window.open('',height='); lose.document.write('

我是新打开的窗口

'); lose.blur(); }

  实例:返回新打开窗口的名称

function openWin(){ var newWin=window.open('','newWindow',height='); newWin.document.write('

新窗口名称:'+ newWin.name + '

'); }

  实例:打开新窗口向父窗口传递信息

function openWin(){ var newWin=window.open('',height='); newWin.document.write("

关闭我之后会向父窗口输入文本信息

"); newWin.focus(); newWin.opener.document.write('

我是父窗口,加载完成后,向我输出内容会覆盖我所有内容

'); }

  实例:指定窗口大小、移动窗口和滚动内容

<Meta charset="UTF-"> JavaScript实例@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_89@ </head> <body> <br><br> <h>用指定像素调整窗口大小:</h> <input type="button" value="打开" onclick="openWin()"><br><br> <input type="button" value="调整" onclick="byWin()"> <script> var w; function openWin(){ w=window.open('',top='); w.focus(); } function byWin(){ //如果不使用框架,可使用window代替top w.top.resizeBy(,); w.focus(); } </script> <h>将窗口的大小调整到指定的宽度和高度:</h> <input type="button" value="打开" onclick="newWin()"><br><br> <input type="button" value="调整" onclick="toWin()"> <script> var w; function newWin(){ w=window.open('',height='); w.focus(); } function toWin(){ w.resizeTo(,); w.focus(); } </script> <h>相对于当前位置移动新窗口:</h> <input type="button" value="打开" onclick="oWin()"><br><br> <input type="button" value="多移动几下" onclick="moveWin()"> <script> var w; function oWin(){ w=window.open('',height='); } function moveWin(){ w.moveBy(,); w.focus(); } </script> <h>移动新窗口到指定位置:</h> <input type="button" value="打开" onclick="nWin()"><br><br> <input type="button" value="移动" onclick="moveToWin()"> <script> var w; function nWin(){ w=window.open('',height='); } function moveToWin(){ w.moveTo(,); w.focus(); } </script> <h>由指定的像素数滚动<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>:</h> <input type="button" style="position:fixed;top:;" onclick="scrollWin()" value="由指定的像素数滚动<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>"> <script> function scrollWin(){ window.scrollBy(,); } </script> <h>滚动到<a href="/tag/zhidingneirong/" target="_blank" class="keywords">指定内容</a>处:</h> <input type="button" onclick="scrollWindow()" value="滚动到<a href="/tag/zhidingneirong/" target="_blank" class="keywords">指定内容</a>处"> <script> function scrollWindow(){ window.scrollTo(,); } </script> <br><br><br><br><br><br> </body> </html></pre> </div> <p>  <h3><a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>解析:</h3></p> <p>  resizeBy(w,h):根据指定的像素来调整窗口的大小。该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>定义指定窗口的右下角移动的像素,左上角将不会被移动(它停留在其原来的坐标)。</p> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>有两个参数,第一个参数是必需的,指定窗口宽度<a href="/tag/zengjia/" target="_blank" class="keywords">增加</a>的像素数。第二个参数可选,指定窗口高度<a href="/tag/zengjia/" target="_blank" class="keywords">增加</a>的像素数。两个参数可为正数,也可为负数。</p> <p>  resizeTo(w,h):用于把窗口大小调整为指定的宽度和高度。</p> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>两个参数都是必需的,用来指定设置窗口的宽度和高度,以像素计。</p> <p>  moveBy(xnum,ynum):可相对窗口的当前坐标把它移动指定的像素。</p> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>有两个参数,第一个参数指定要把窗口右移的像素数,第二个参数指定要把窗口下移的像素数。</p> <p>  moveTo(x,y):可把窗口的左上角移动到一个指定的坐标。</p> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>有两个参数,第一个参数指定窗口新位置的 x 坐标,第二个参数指定窗口新位置的 y 坐标。</p> <p>  scrollBy(xnum,ynum):可把<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>滚动指定的像素数。</p> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>有两个必需参数,第一个参数指定把文档向右滚动的像素数。第二个参数指定把文档向下滚动的像素数。</p> <p>  scrollTo(x,y):可把<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>滚动到指定的坐标。</p> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>有两个必需参数,第一个指定要在窗口文档<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>区左上角<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>的文档的 x 坐标。第二个参数指定要在窗口文档<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>区左上角<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>的文档的 y 坐标。</p> <p>  实例:打印<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a></p> <div class="jb51code"> <pre class="brush:js;"> <body> <input type="button" value="打印<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>" onclick="printpage()"> <script> function printpage(){ window.print(); } </script> </body></pre> </div> <p>  (2)、<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>窗口。</p> <p>  window.close()<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>可用于<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>当前窗口。</p> <div class="jb51code"> <pre class="brush:js;"> //点击按钮<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>当前窗口 <input type="button" value="<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>窗口" onclick="window.close()"></pre> </div> <p>  该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>在Chrome下运行正常。IE下弹窗<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>:你查看的网页正在试图<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>选项卡,是否<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>选项卡?点击否,不<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>,点击是,<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>窗口。在FF下会报错。因为在FF下不允许脚本<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>非脚本打开的窗口,也就是不能<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>一个<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>自己打开的窗口,只能<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>由open打开的窗口。所以可以先用open打开,再<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>,这样就能<a href="/tag/jiejue/" target="_blank" class="keywords">解决</a>FF下不能<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>的问题。这就需要创建两个文档来演示该问题:第二个文档使用上面实例保存为close.html,第一个文档如下:</p> <div class="jb51code"> <pre class="brush:js;"> //先用open打开保存的文档,然后再点击<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>窗口按钮,<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>就达到了 <input type="button" value="打开窗口" onclick="window.open('close.html');"> </pre> </div> <p>  FF浏览器的安全机制比较高,不能<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a><a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>打开的窗口,在网上也没找有找到什么好的办法,只能<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>浏览器的默认配置,显然这是不可取的。上面的办法比较笨,另辟蹊跷不能<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a><a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>打开的,那就自己open一个再close,但这还是比较实在的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>,至少目的是达到了。</p> <p>  在IE下可使用下面的<a href="/tag/daima/" target="_blank" class="keywords">代码</a><a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>当前窗口,不弹窗<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>。同时也适用于Chrome。这里使用a<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>在FF下可以看到报错,使用按钮则没有报错信息。</p> <div class="jb51code"> <pre class="brush:js;"> <a href="javascript:window.opener=null;window.open('','_self');window.close();"><a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a></a></pre> </div> <p>  实例:<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>新打开的窗口</p> <div class="jb51code"> <pre class="brush:js;"> <body> <input type="button" value="打开" onclick="openWin()"> <input type="button" value="<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>" onclick="closeWin()"> <script> function openWin(){ newWin=window.open('http://www.baidu.com',top='); } function closeWin(){ newWin.close(); } </script> </body></pre> </div> <p>  实例:检查新窗口是否已<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a></p> <div class="jb51code"> <pre class="brush:js;"> <body> <input type="button" value="打开'" onclick="openWin()"> <input type="button" value="<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>" onclick="closeWin()"> <input type="button" value="是否<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>" onclick="checkWin()"> <p id="p"></p> <script> var newWin; function openWin(){ newWin=window.open('',top='); } function closeWin(){ if(newWin){ newWin.close(); } } var oP=document.getElementById('p'); function checkWin(){ if(!newWin){ oP.innerHTML='新窗口还没被打开!'; } else{ if(newWin.closed){ oP.innerHTML='新窗口已<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>!'; } else{ oP.innerHTML='新窗口未<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>!'; } } } </script> </body></pre> </div> <p><span style="color: #0000ff">4、浏览器信息。</p> <p>  window.navigator对象<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>包含有关访问者浏览器的信息。该<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>在使用时可以不加window前缀。</p> <div class="jb51code"> <pre class="brush:js;"> <body> <div id="div"></div> <script> txt = '<p>Browser CodeName(浏览器<a href="/tag/daima/" target="_blank" class="keywords">代码</a><a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>): ' + navigator.appCodeName + '</p>'; txt+= '<p>Browser Name(浏览器<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>): ' + navigator.appName + '</p>'; txt+= '<p>Browser Version(浏览器版本): ' + navigator.appVersion + '</p>'; txt+= '<p>Cookies Enabled(启用Cookies): ' + navigator.cookieEnabled + '</p>'; txt+= '<p>Platform(操作平台): ' + navigator.platform + '</p>'; txt+= '<p>User-agent header(由客户机发送服务器的 user-agent 头部信息): ' + navigator.userAgent + '</p>'; txt+= '<p>User-agent language(客户机代理语言): ' + navigator.systemLanguage + '</p>'; document.getElementById('div').innerHTML=txt; </script> </body></pre> </div> <p>  其中最常用的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>是navigator.userAgent,返回<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>代理头的字符串表示(就是<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>浏览器版本信息等的字符串),是识别浏览器的关键,可用于<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前浏览器版本信息,判断浏览器的类型。</p> <div class="jb51code"> <pre class="brush:js;"> <script> document.write(navigator.userAgent); </script></pre> </div> <p>  实例:简单的判断浏览器类型</p> <div class="jb51code"> <pre class="brush:js;"> <script> document.write('操作平台:' + navigator.platform); function userBrowser(){ var name = window.navigator.userAgent; //IE浏览器 //判断IE和非IE可以使用ActiveXObject,只有IE<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>该对象 //在IE中window.ActiveXObject返回一个对象,则判断为true //其他浏览器都返回undefine,两个否返回false,进入或判断,也返回false if(!!window.ActiveXObject || 'ActiveXObject' in window){ return 'IE浏览器'; } //FF浏览器 else if(name.indexOf('Firefox') > -){ return 'Firefox浏览器'; } //Chrome浏览器 else if(name.indexOf('Chrome') > -){ return 'Chrome浏览器'; } //Opera浏览器 else if(name.indexOf('Opera') > -){ return 'Opera浏览器'; } //Safari浏览器 else if(name.indexOf('Safari') > -){ return 'Safari浏览器'; } else{ return 'unknow'; } } alert('浏览器类型为:' + userBrowser()); </script></pre> </div> <p><span style="color: #0000ff">5、<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>地址。</p> <p>  window.location对象用于获得<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>的地址 (URL),并把浏览器<a href="/tag/zhongdingxiang/" target="_blank" class="keywords">重定向</a>到新的<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,简单说就是可以给赋值,像使用open一样。</p> <p>  语法:location.[<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>|<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>]</p> <div class="jb51code"> <pre class="brush:js;"> <script> //<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>URL。若中间出现乱码百分号是<a href="/tag/zhongwen/" target="_blank" class="keywords">中文</a>转码后的<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>。 document.write(window.location); </script> <input type="button" value="点击查看" onclick="window.location='http://www.baidu.com','_blank'"> </body></pre> </div> <p>  <h3>location对象其他应用:</h3></p> <p>  (1)、location对象<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a></p> <p>    location.hash  设置或返回从井号(#)开始的 URL(锚)。</p> <p>    location.href  设置或返回完整的 URL。</p> <p>    location.pathname  设置或返回当前 URL 的路径部分。</p> <p>    location.host  设置或返回主机名和当前 URL 的端口号。</p> <p>    location.hostname  设置或返回当前 URL 的主机名,不包含端口。</p> <p>    location.port  设置或返回当前 URL 的端口号 (80 或 443)。</p> <p>    location.protocol  返回所使用的 web 协议(http:// 或 https://)。</p> <p>    location.search  设置或返回从问号(?)开始的 URL(<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a>部分)。</p> <p>  (2)、location对象<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a></p> <p>    实例:加载一个新文档</p> <div class="jb51code"> <pre class="brush:js;"> <input type="button" value="点击加载" onclick="newDoc()"> <script> function newDoc(){ window.location.assign('http://www.baidu.com') } </script></pre> </div> <p>实例:重新载入当前文档</p> <div class="jb51code"> <pre class="brush:js;"> <input type="button" value="点击载入" onclick="reloadPage()"> <script> function reloadPage(){ location.reload() } </script></pre> </div> <p>实例:用新的文档替换当前文档</p> <div class="jb51code"> <pre class="brush:js;"> <input type="button" value="点击替换" onclick="replaceDoc()"> <script> function replaceDoc(){ window.location.replace('http://www.baidu.com') } </script></pre> </div> <p><span style="color: #0000ff">6、浏览器尺寸。</p> <p>  window.screen对象用于<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>的屏幕信息。在使用时候可以不加window前缀。</p> <p>  (1)、屏幕分辨率的宽度和高度</p> <p>  screen.colorDepth返回<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>浏览器表示的颜色位数,通常为32位(每像素的位数)。</p> <p>  screen.width和screen.height返回屏幕分辨率的宽度和高度。</p> <div class="jb51code"> <pre class="brush:js;"> <script> document.write( '屏幕宽度:' + screen.width + 'px' ); document.write('<br>'); document.write( '屏幕高度:' + screen.height + 'px' ); </script> </pre> </div> <p>  (2)、可用宽度和高度</p> <p>  screen.availWidth和screen.availHeight返回窗口可以使用的屏幕宽度和高度,不<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>窗口任务栏。</p> <p>  不同系统的窗口任务栏默认高度不一样,任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度也不一样。</p> <div class="jb51code"> <pre class="brush:js;"> <script> document.write('可用宽度:' + screen.availWidth +'px'); document.write('<br>'); document.write('可用高度:' + screen.availHeight +'px'); </script></pre> </div> <p><span style="color: #0000ff">7、工作区尺寸。</p> <p>  (1)、可视区宽度和高度。</p> <p>  <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>浏览器窗口尺寸(浏览器的视口,不<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>工具栏和滚动条)的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>:</p> <p>  ①、IE9以上及现在浏览器都<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>:</p> <p>  window.innerWidth  <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>浏览器窗口的内部宽度。</p> <p>  window.innerHeight  <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>浏览器窗口的内部高度。</p> <p>  ②、对于IE9之前可以用:</p> <p>  document.documentElement.clientWidth  表示HTML文档所在窗口的当前宽度。   document.documentElement.clientHeight  表示HTML文档所在窗口的当前高度。</p> <p>  或者可以使用:</p> <p>  Document对象的body<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>对应HTML文档的<body><a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a></p> <p>  document.body.clientWidth     document.body.clientHeight</p> <p>  在不同浏览器都可以使用的兼容写法:</p> <div class="jb51code"> <pre class="brush:js;">  var w = document.documentElement.clientWidth || document.body.clientWidth;   var h = document.documentElement.clientHeight || document.body.clientHeight; <script> //对于IE+、Chrome、Firefox、Opera 以及 Safari: document.write('可视宽为:'+window.innerWidth + '<br>'); document.write('可视高为:'+window.innerHeight + '<br>'+ '<br>'); document.write('可视宽为:'+document.documentElement.clientWidth + '<br>'); document.write('可视高为:'+document.documentElement.clientHeight + '<br>'+ '<br>'); //注意该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>返回的数值与其他不同 document.write('可视宽为:'+document.body.clientWidth + '<br>'); document.write('可视高为:'+document.body.clientHeight + '<br>'+ '<br>'); var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight; document.write('可视宽为:'+ w +'<br>'+ '可视高为:' +h); </script></pre> </div> <p>  (2)、实际网页尺寸。</p> <p>  scrollHeight和scrollWidth,<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>高度和宽度。</p> <p>  scrollHeight和scrollWidth还可<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>DOM元素中<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>实际占用的高度和宽度。</p> <p>  在IE下scrollHeight 是网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>实际高度,可以小于clientHeight。在FF下scrollHeight 是网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>高度,不过最小值是 clientHeight。也就是说网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>实际高度小于 clientHeight 时,scrollHeight返回 clientHeight 。</p> <p>  在不同浏览器都可以使用的兼容写法:</p> <div class="jb51code"> <pre class="brush:js;">   var w =document.documentElement.scrollWidth || document.body.scrollWidth;   var h =document.documentElement.scrollHeight || document.body.scrollHeight;</pre> </div> <div class="jb51code"> <pre class="brush:js;"> <script> //兼容性写法 var w =document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight; document.write('网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>宽为:'+ w +'<br>'+ '网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>高为:' +h); </script></pre> </div> <p>  (3)、包含滚动条的网页尺寸。</p> <p>  offsetHeight和offsetWidth,<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>高度和宽度(<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>滚动条等边线,会随窗口的<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>大小改变)。</p> <p>  offsetHeight = clientHeight(<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>可视区高度) + 滚动条 + 边框。</p> <div class="jb51code"> <pre class="brush:js;"> <script> //兼容性写法 var w = document.documentElement.offsetWidth || document.body.offsetWidth; var h = document.documentElement.offsetHeight || document.body.offsetHeight; document.write('网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>宽为:'+ w +'<br>'+ '网页<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>高为:' +h); </script></pre> </div> <p>  (4)、滚动距离</p> <p>  所谓滚动距离,就是可视区距离<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>顶部滚动了多远,也叫网页卷去的距离。</p> <p>  scrollTop:设置或<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>位于对象最顶端与窗口中可见<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>的最顶部之间的距离 ,也就是网页被滚动的高度。</p> <p>  scrollLeft:设置或<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>位于给定对象左边界与窗口中目前可见<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>的最左端之间的距离,也就是网页被滚动的宽度。</p> <p>  offsetTop:<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>指定对象相对于版面或由 offsetParent <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>指定的父坐标的计算顶部位置,当前对象到其上级顶部的距离,或者距离<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>顶部的距离。</p> <p>  offsetLeft:<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>指定对象相对于版面或由 offsetParent <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>指定的父坐标的计算左侧位置 ,当前对象到其上级左端的距离,或者距离<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>左端的距离。</p> <p>  offsetTop和offsetLeft不能赋值,设置对象到<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>顶部的距离可用style.top<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>,设置对象到<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>左部的距离请用style.left<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>。</p> <p>  offsetParent:<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>中设置postion<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>(relative、absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。该<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>用于<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>一个元素用于定位的父级,语法:obj.offsetParent</p> <p>  实例:滚动<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,点击<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>查看滚动距离</p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="UTF-"> <title>JavaScript实例@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_89@ <script> //几款浏览器每次滚动,距离顶部的距离都不一样: //在Chrome为:-----。都是整数递进。 //而在FF下则为:----。每次递进。 //而在IE下则为:----。每次递进则为。 window.onload=function (){ document.onclick=function (){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; alert(scrollTop); }; }; </script> </head> <body style="height:px"> </body> </html></pre> </div> <p>  该知识点相当重要,而且<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>比较混乱,不容易理解,需要做大量练习,巩固所学。</p> <p><span style="color: #0000ff">8、浏览器历史记录。</p> <p>  window.history对象记录了<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>曾经浏览过的<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>(URL),并可以实现浏览器前进与后退导航的<a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>。从窗口被打开的那一刻开始记录,每个浏览器窗口、每个<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>页乃至每个框架,都有自己的history对象与特定的window对象关联。在使用时可以不加window前缀。</p> <p>  语法:window.history.[<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>|<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>]</p> <p>  (1)、History 对象<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a></p> <p>  历史记录不唯一,所以该对象具有length<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>,可返回浏览器历史列表中的URL<a href="/tag/shuliang/" target="_blank" class="keywords">数量</a>。</p> <p>  (2)、History 对象<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a></p> <p>  ①、history.back()  加载 history 列表中的前一个URL,就是返回前一个<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,与浏览器点击后退按钮<a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>相同。</p> <p>    该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>等同于:history.go(-1);</p> <p>  ②、history.forward()  加载 history 列表中的下一个 URL。就是返回下一个<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,与浏览器的前进按钮<a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>相同。</p> <p>    该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>等同于:history.go(1);</p> <p>  ③、history.go(num)  根据当前所处的<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,加载 history 列表中的某个具体的<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>。</p> <p>    参数说明:1为前一个,go(1)等价forward()。0为<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>。-1下一个<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,后一个,go(-1)等价back()。</p> <p>    也可为其他数值,指定要访问的URL在History的URL列表中的相对位置。</p> <p>    比如:history.go(-2);  返回<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>之前浏览过的第二个历史<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,相当于点击2次后退按钮。</p> <p>    history.go(3);  返回<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>之后浏览过的第三个历史<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>。</p> <p><span style="color: #0000ff">9、Cookie</p> <p>  Cookie 用于存储 web <a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>信息。就是一些数据,比如<a href="/tag/zidong/" target="_blank" class="keywords">自动</a><a href="/tag/denglu/" target="_blank" class="keywords">登录</a>和记住<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>,存储在<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>电脑上的文本<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>中,方便再次使用。当 web 服务器向浏览器发送 web <a href="/tag/yemian/" target="_blank" class="keywords">页面</a>时,在连接<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>后,服务端不会记录<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>的信息。Cookie 的作用就是用于<a href="/tag/jiejue/" target="_blank" class="keywords">解决</a> "如何记录客户端的<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>信息":当<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>访问 web <a href="/tag/yemian/" target="_blank" class="keywords">页面</a>时,他的名字可以记录在 cookie 中。在<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>下一次访问该<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>时,可以在 cookie 中读取<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>访问记录。</p> <p>  cookie是以域名为单位的,同一个网站中所有<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>共享一套cookie,一般不会超过50条,大小为4k-10k左右。限制<a href="/tag/shuliang/" target="_blank" class="keywords">数量</a>和存储大小,这样也阻止了恶意网站给cookie中恶意存储,不然一会计算机硬盘就满了。cookie也是有过期时间的,比如网页中的<a href="/tag/zidong/" target="_blank" class="keywords">自动</a><a href="/tag/denglu/" target="_blank" class="keywords">登录</a>,有些为2周内,有些为1周内,当然过期时间是可以自行定义的,<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>也可以自行清理。</p> <p>  在JS中使用cookie很简单,就是document.cookie  该<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>可用来创建、读取和<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>cookie。</p> <p>  语法:<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>=值</p> <p>  当浏览器从服务器上请求 web <a href="/tag/yemian/" target="_blank" class="keywords">页面</a>时, 属于该<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的 cookie 会被<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到该请求中。服务端通过这种方式来<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>的信息。</p> <p>  <a href="/tag/tishi/" target="_blank" class="keywords">提示</a>:跟cookie相关的本地测试最好都用FF,只有FF会保存本地的cookie,其他浏览器都不会保存。在IE下也可以测试。</p> <p>  FF下查看<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>:可点击<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>右键 - 查看<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>信息 - 安全 - 查看cookie,空白的<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>夹就是本地的cookie。</p> <p>(1)、创建和读取cookie</p> <p>  默认情况下,cookie属于<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>并在浏览器<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>时<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>。</p> <p>  ccokie中的=不是赋值,而是<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>,可多次<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>,并不会发生后面将前面覆盖的情况。</p> <p>  expires:有效日期,用于指定cookie的过期时间。如过不设置,浏览器<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>时cookie就被<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>了。</p> <p>  path:可用于设置cookie的路径。</p> <p>  cookie可直接被读取,或者存储与变量中。</p> <p>  document.cookie 将以字符串的方式返回所有的cookie,格式: cookie1=value; cookie2=value; cookie3=value;</p> <p>实例:创建<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="/tag/denglu/" target="_blank" class="keywords">登录</a>信息,设置2周后过期,并读取cookie</p> <div class="jb51code"> <pre class="brush:js;"> <script> var oD=new Date(); //从当天起天也就是周后是几号 oD.setDate(oD.getDate()+); //设置过期时间周。可在查看cookie中看到user的过期时间为周后 document.cookie='user=小白;expires='+oD; //浏览器<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a><a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>本条cookie。pass的过期时间为在会话结束时。 document.cookie='pass='; //读取cookie alert(document.cookie); </script></pre> </div> <p>(2)、<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>cookie</p> <p>  <a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>cookie类似于创建cookie,新的cookie会覆盖旧的cookie,其实并不能说是被覆盖了,而是新的cookie 将被<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到 document.cookie 中<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>。</p> <div class="jb51code"> <pre class="brush:js;"> <script> var oD=new Date(); oD.setDate(oD.getDate()+); document.cookie='user=小白;expires='+oD; document.cookie='pass='; //可在查看cookie中看到user和pass的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>都被新的cookie替换了 document.cookie='user=小明;expires='+oD; document.cookie='pass='; //读取cookie alert(document.cookie); </script></pre> </div> <p>(3)、<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>cookie</p> <p>  <a href="/tag/shanchu/" target="_blank" class="keywords">删除</a> cookie 非常简单。只需要设置 expires 参数为以前的时间即可,也就是设置为-1,昨天过期,浏览器一看这不是昨天就过期么,直接<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>。</p> <p>下面是设置、<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>和<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>cookie的封装<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>,方便以后使用。</p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="UTF-"> <title>Cookie封装<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_89@ </head> <body> <script> //设置cookie //参数:cookie的名字,参数:cookie的值,参数:cookie过期时间 function setCookie(name,value,iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+'; expires='+oDate; } //userName一年后过期,passWord两周后过期。 setCookie('userName','小白',); setCookie('passWord',); //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>cookie //参数为cookie的<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a> function getCookie(name){ //用字符串将cookie分割,注意要用:默认的cookie样式,分号加空格。 var arr=document.cookie.split('; '); for(var i=;i<arr.length;i++){ //默认字符串<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>为:a=; b=; c= //所以用等号再做一次分隔 var result=arr[i].split('='); //result的第一位存<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a> //如果第一位等于name,就说明找到想要的了,就返回第二位的值。 if(result[]==name){ //result的第二位存值 return result[]; } } //如果没有cookie就返回一个空字符串。比如有些<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>是第一次进入网站,就没有产生cookie。 return ''; } //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>cookie中passWord的值 alert(getCookie('passWord')); //参数为<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>哪条cookie function removeCookie(name){ //参数:cookie的值,表示随便一个。参数:昨天过期,立马<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>。 setCookie(name,-); } //将cookie中userName和passWord<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>。 //在点击查看<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>信息,之前保存的cookie就不存在了。 removeCookie('userName'); removeCookie('passWord'); </script> </body> </html></pre> </div> <p>  (4)、cookie小应用:记住上一次的<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a></p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="UTF-"> <title>记住上一次的<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_89@ <script> function setCookie(name,iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+'; expires='+oDate; } function getCookie(name){ var arr=document.cookie.split('; '); for(var i=;i<arr.length;i++){ var result=arr[i].split('='); if(result[]==name){ return result[]; } } return ''; } function removeCookie(name){ setCookie(name,-); } window.onload=function (){ var oForm=document.getElementById('form'); var oUser=document.getElementsByName('user')[]; //在点击提交按钮时发生的事件 oForm.onsubmit=function (){ //创建一个cookie,值为<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>输入的值,天后过期 setCookie('user',oUser.value,); }; //<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>的值为<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>cookie中的user oUser.value=getCookie('user'); }; </script> </head> <body> //index.html为本文档<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>名 <form id="form" action="index.html"> <a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>:<input type="text" name="user"><br> 密 码:<input type="password" name="pass"><br> <input type="submit" name="" value="<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>"> </form> </body> </html></pre> </div> <p>window的六大<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>,同时它们也是对象:</p> <p>document主要操作web加载的网页文档;</p> <p>frames为窗口框架对象数组;</p> <p>history保存<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>上网记录;</p> <p>location提供加载的文档有关信息以及控制<a href="/tag/yemian/" target="_blank" class="keywords">页面</a><a href="/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>;</p> <p>navigator对象存储浏览器<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>及版本信息;</p> <p>screen<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>屏幕相关信息。</p> <p>其中document对象<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>下也有几个重要的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>对象,以document为核心的对文档进行操作的各个对象组成的结构便是大家所熟悉的DOM,从这一点看来,DOM其实是BOM的一个子集.</p> <p>window对象除了提供了旗下的六大对象<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>外,还拥有设置浏览器信息的一些基本<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>,主要如下</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" onclick="window.open(this.src)" src="https://files.jb51.cc/file_images/article/201511/20151126150549884.jpg?201510261563" baiduimageplusstatus="2" baiduimageplusrect="null" alt="" /></p></p></div> <div class="topcard-tags"><a href="/tag/bomp/" class="tag_link" target="_blank">bom</a><a href="/tag/javascriptbom/" class="tag_link" target="_blank">javascript_bom</a><a href="/tag/jsp/" class="tag_link" target="_blank">js</a></div> <ul class="list-group"> <li class="list-group-item"><a href="/js/51465.html" title="js实现延时加载Flash的方法">上一篇:js实现延时加载Flash的方法</a><a href="/js/51463.html" title="Javascript模仿淘宝信用评价实例(附源码)" class="text-muted pull-right">下一篇:Javascript模仿淘宝信用评价实例(附</a> </li> </ul> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的JavaScript相关文章</h1></div> <div class="list_con"> <a href="/js/997747.html" title="Javascript中的事件冒泡与捕获"><div class="title">Javascript中的事件冒泡与捕获</div> <div class="summary">事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支...</div> <time class="summary">作者:前端之家 时间:2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/02-22/19/e40e1eb184cb2a5d8c5f6c5e730d8e82.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">搞懂js中小数运算精度问题原因及解决办法</div> <div class="summary">js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其...</div> <time class="summary">作者:前端之家 时间:2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997744.html" title="搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理"><div class="title">搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理</div> <div class="summary">什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提...</div> <time class="summary">作者:前端之家 时间:2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997743.html" title="前端对base64编码的理解,原生js实现字符base64编码"><div class="title">前端对base64编码的理解,原生js实现字符base64编码</div> <div class="summary">@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是...</div> <time class="summary">作者:前端之家 时间:2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997742.html" title="搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式"><div class="title">搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式</div> <div class="summary">搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图...</div> <time class="summary">作者:前端之家 时间:2021-02-22</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="/js/997318.html" title="js判断浏览器是否支持webGL"><div class="title">js判断浏览器是否支持webGL</div> <div class="summary">起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...</div> <time class="summary">作者:前端之家 时间:2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997317.html" title="js判断undefined和null"><div class="title">js判断undefined和null</div> <div class="summary">js判断undefined js判断null js判断null和undefined</div> <time class="summary">作者:前端之家 时间:2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997316.html" title="将文字自动转为banner打印形式的工具"><div class="title">将文字自动转为banner打印形式的工具</div> <div class="summary">http://patorjk.com/software/taag/</div> <time class="summary">作者:前端之家 时间:2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997315.html" title="聊一聊 bootstrap 的轮播图插件"><div class="title">聊一聊 bootstrap 的轮播图插件</div> <div class="summary">今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插...</div> <time class="summary">作者:前端之家 时间:2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997314.html" title="js实现图片无缝循环跑马灯"><div class="title">js实现图片无缝循环跑马灯</div> <div class="summary">html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...</div> <time class="summary">作者:前端之家 时间:2021-02-14</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div> <!-- left end--> <!-- right --> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="/js/997747.html" title="Javascript中的事件冒泡与捕获" target="_blank">• Javascript中的事件冒泡与</a></li> <li><a href="/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法" target="_blank">• 搞懂js中小数运算精度问题</a></li> <li><a href="/js/997744.html" title="搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理" target="_blank">• 搞懂:前端跨域问题JS解决</a></li> <li><a href="/js/997743.html" title="前端对base64编码的理解,原生js实现字符base64编码" target="_blank">• 前端对base64编码的理解,</a></li> <li><a href="/js/997742.html" title="搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式" target="_blank">• 搞懂:MVVM模型以及VUE中的</a></li> <li><a href="/js/997493.html" title="js实现横向跑马灯效果" target="_blank">• js实现横向跑马灯效果</a></li> <li><a href="/js/997318.html" title="js判断浏览器是否支持webGL" target="_blank">• js判断浏览器是否支持webG</a></li> <li><a href="/js/997317.html" title="js判断undefined和null" target="_blank">• js判断undefined和null</a></li> <li><a href="/js/997316.html" title="将文字自动转为banner打印形式的工具" target="_blank">• 将文字自动转为banner打印</a></li> <li><a href="/js/997315.html" title="聊一聊 bootstrap 的轮播图插件" target="_blank">• 聊一聊 bootstrap 的轮播图</a></li> </ul> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> </div> <!-- right end --> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程,小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程,小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程,小白也能轻松搞定!" target="_blank">· 联想笔记本一键重装Win10系统图文教程,小白也能...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程:从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程:从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持,与你一起学习编程,相信编程改变未来!" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="/js/base.js"></script> </body> </html>