【持续更新】前端开发过程中遇到的Tips 和 Problems

最新推荐文章于 2022-09-26 16:13:16 发布

一只狐猴

最新推荐文章于 2022-09-26 16:13:16 发布

阅读量234

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37975886/article/details/93640976

版权

本文汇总了前端开发过程中的实用Tips和常见问题，包括无返回数据的HTTP请求处理、document.write()的副作用及解决方案、JavaScript截流技术、获取元素所有样式的技巧、边距设置导致的尺寸变化以及CSS盒模型、弹出蒙层的页面定位问题、静态资源缓存更新策略和calc()函数的使用注意事项等，是前端开发者必备的知识库。

摘要由CSDN通过智能技术生成

1.【Tip】无返回数据的http请求

背景描述：触发点击事件时，发送某请求 http://$%^.$%^?a=*&b=* 通知后台，无返回数据

可行做法：ajax get请求

Tip：访问图片的方式自动请求

var img = new Image();

img.src='http://$%^.$%^?a=*&b=*'

2.【Problem】document.write()带来的问题

背景描述：document.write最简单的理解就是：打印输出，在页面中输出write()括号内的东西。在JS中 document是DOM树最顶端的对象，也就是说是在body里打印括号里的东西。调用浏览器DOM中document对象的write方法，将一段HTML代码或是一段文本内容输出到文档,以使浏览器可以动态处理。要在页面中渲染完成后动态的插入一段script代码，使用document.write('<script>...</script>')；结果页面原本的内容都不见了，只有<script>...</script>

原因：在已经渲染完的页面也就是执行过load事件的页面里，调用document.write()会自动调用docuement.open()打开一个文档流，清空该文档的内容！然后写入数据，写完再调用document.close(),以告诉浏览器页面已经加载完毕。写入的数据会被解析到文档结构模型里。在上面的例子里，元素h1会成为文档中的一个节点。此时页面上就只剩下'<script>...</script>'这一段了。

特殊：如果document.write()调用发生在<script>标签中，那么它将不会自动调用document.open()。

解决：使用dom的api，操作元素。

var scri = document.createElement('script');

document.getElementByTagName('head')[0].appendChild(scri);