网站开发进阶 (十一) 知识汇总

2022 年 5 月 04 日
本文字数：1939 字
阅读完需：约 6 分钟

一、JS 实现打印功能(包括打印预览、打印设置等)

介绍两个关键的css

<style media="print">
         .Noprint { DISPLAY: none }
         .PageNext{ PAGE-BREAK-AFTER: always }
 </style>

复制代码

第一个在不需要打印的标签上添加（子标签也将不被打印），第二个在需要换行的标签处添加（该标签所表示的内容将在当前打印的一页内）。基本的做法就是直接调用系统打印功能，如下代码所示:

window.print()；

复制代码

就可实现页面局部打印，而且可以实现打印预览、设置等操作。

二、window.onload 用法详解

网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:

将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。
通过window.onload来执行脚本代码。

第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

三、JS 实现二维码生成

项目开发过程中，已然花费半天的时间，仍旧未能将二维码显示在订单中。但是可以在单个页面中显示二维码，结合到 angularjs 的控制器中就失效了，自己是真的找不到其中的原因了。费解！刚开始怀疑是遮挡的问题，结果将位置更改之后还是不能显示。

那么自己就得转换解题思路了，将二维码显示单独置于一个页面中，然后通过页面的嵌套（有关文章见博文"如何将一个html页面嵌套在另一个页面中"），将二维码再显示到订单中。

二维码生成借用第三方的 js 库，主要代码如下:

<body>
  <div style="margin-top: 70px; margin-left: 800px;">
  <div id="qrcode" alt="二维码图片"></div>
  <input type="text" id="getval" style="margin-top: 70px;"/> 
  <button id="send"  ng-click="doQrcode()">点击更换二维码</button>
  </div>
  <script>
      window.onload = function(){
          var qrcode = new QRCode(document.getElementById("qrcode"), {
              width : 96, //设置二维码宽高
              height : 96
          });
          qrcode.makeCode("http://www.baidu.com"); //默认二维码内容
          document.getElementById("send").onclick =function(){
              qrcode.makeCode(document.getElementById("getval").value);
          }
      }
  </script>
</body>

复制代码

四、Multiple annotations found at this line:basePath cannot be resolved to a variable

出现以上错误，主要是由下面这句引起的:

<base href="<%= basePath %>">

复制代码

但这句话似乎又没有任何问题。将这句话删除问题就得到了解决，而且对原来的网站没有影响。

总结如下:这个错误出现的原因是由自己在开发jsp文件引入时引起的，文件加载合并过程中出现了代码加载重复的现象。经过阅读下面的文档则恍然大悟，原来自己删了 JSP 页面开头的代码，才会出现这样的问题。将源代码进行恢复则问题得到解决。

JSP 中<base href="<%=basePath%>">作用

通常在 JSP 页面开头有如下代码：

<%  
	String path = request.getContextPath();  
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>

复制代码

这段代码的意思是获取当前项目的路径，如：http://localhost:8080/项目名称。

在<head></head>中通常有如下代码：

<base href="<%=basePath%>">

复制代码

这是设置基础路径的,basePath为变量，简单的静态网页的话你设置比如：<base href="http://www.baidu.com">，那你下面的 href 属性就会以你上面设的为基准，如：<a href="http://www.baidu.com/xxx.htm"></a>你现在就只需要写<a href="xxx.htm"></a>。

五、Html 元素隐藏的几种方式

隐藏Html元素的方法最常用的方法有css的display:none，一种方法两种实现方式，感兴趣的朋友可以了解下.

1.使用css

style="display:none;"

复制代码

2.使用javascript

item.style.display='none';

复制代码

六、js 获取 html 标签中的值

项目开发过程中，由于需求所迫，需要获取html标签元素中的内容，下面做一简单总结。以下所讲的示例适用于其它标签元素。

主要包括两种方法获取元素内容:

方法一：.innerText

time_Interval = document.getElementById("Time_Interval").innerText;
alert(time_Interval);

复制代码

方法二：.innerHTML

time_Interval = document.getElementById("Time_Interval").innerHTML;
alert(time_Interval);

复制代码

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/fe823f554ae34c03f62ef02a4】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

网站开发进阶 (十一) 知识汇总

一、JS 实现打印功能(包括打印预览、打印设置等)

二、​window.onload 用法详解

三、JS 实现二维码生成

四、Multiple annotations found at this line:basePath cannot be resolved to a variable

五、Html 元素隐藏的几种方式

六、js 获取 html 标签中的值

No Silver Bullet

评论

二、window.onload 用法详解