技术，软件，生活
自己用COS 的URL 访问HTML 资源，chrome 和firefox ，edge 和 ie11都能正常，但自己用ie8访问会出现跳转到404。
自己测试各种浏览器，我发现只有在IE8 出现问题，那么证明肯定是IE8兼容性问题，我突然想起自己以前用NODE http 写静态资源，返回数据没有返回对应的content-type，导致在无法访问问题，那么估计就这么问题。
我开启cos静态资源网站，它的静态网站资源用的不同的url。ie8 不能根据后缀采用对应的content-type,目前主流的浏览器都支持不带content-type，根据后缀才解析。
自己最近用jquery-emoji发现光标有问题，因为他用可以编辑div导致，当他点击按钮弹出表情选择框的时候，光标会回到最开始的地方，这样子导致插入表情位置不对。
/**
* 扩展JS
* by 鱼儿
*/
/**
* 模块：div 可编辑支持光标修复
*/
//上次光标选中
var last_div_editor_sel
//上次选中范围
var last_div_editor_range = []
/**
*
* @param {Element} div
*/
function extendDivEditor(div){
div.addEventListener('blur', onDivBlur)
div.addEventListener('focus', onDivFocus)
}
function onDivBlur() {
if(document.selection){
//ie10或以下
//暂时我还没有支持
}else{
var sel = window.getSelection()
if(sel.rangeCount > 0){
last_div_editor_range = []
for(var index = 0; index < sel.rangeCount; index++){
last_div_editor_range.push(sel.getRangeAt(index))
}
}
}
}
function onDivFocus(){
if(document.selection){
//ie 10 或以下
//暂时我还没有支持
}else{
var sel = window.getSelection()
for(var index = 0; index < last_div_editor_range.length; index++){
sel.removeAllRanges()
sel.addRange(last_div_editor_range[index])
}
}
}
三，说明
调用extendDivEditor，传入div元素，这样子记录失去焦点的位置，当他获取焦点就回到原来点。我暂时没有写支持ie 10。
网上对selection 和range 介绍很少，自己参考别人代码，然后带蒙写的。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
<style>
#bar{
border: 1px solid #fff;
margin-bottom: 10px;
}
#bar > button {
margin-left: 10px;
}
#test_div{
height: 200px;
background-color: azure;
overflow-y: auto;
}
#test_div>div{
height: 100px;
text-align: center;
line-height: 100px;
}
#test_div>div:nth-child(1){
background-color: aqua;
}
#test_div>div:nth-child(2){
background-color: red;
}
#test_div>div:nth-child(3){
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
var nice = $('#test_div').niceScroll({autohidemode: false})
console.log("what")
console.log($("button"))
//滚动顶部
$("button").eq(0).on("click", ()=>{
console.log(nice)
nice.setScrollTop(0)
})
//滚动底部
$("button").eq(1).on("click", ()=>{
//200 - 133 = 67
var view = nice.view
var h = nice.getContentSize().h
var view_max = h - view.h //得到最大滚动内容 == page.maxh 但动态加载元素
//不准确，所以自己计算得到准确
nice.setScrollTop(view_max)
var top = nice.getScrollTop()
console.log("top:" + top)
console.log(nice)
})
//打印nicescroll 几个属性
$("button").eq(2).on("click", ()=>{
var max_scroll = nice.scrollvaluemax
console.log("最大滚动[滑梯-滑块]:" + max_scroll)
var view = nice.view
console.log("被安装滚动的div[这里是test_div]:" + JSON.stringify(view))
var top = nice.getScrollTop()
console.log("内容具体顶部:" + top)
var page = nice.page
console.log("page[代表当前内容大小]:" + JSON.stringify(page))
var clientSize = nice.getContentSize()
console.log("top + view.h:" + top + "+" + view.h + "=")
console.log("screenTop + view.height == 滚动的过显示的内容高度")
console.log("conentSize == scrollHeight == 等于div真正内容大小，非显示的，只能显示200，但真正有3个DIV，所以300" )
console.log("max_scroll_height = ScrollHeight - view.h:" + (clientSize.h - view.h) + "=" + page.maxh)
console.log(nice)
})
})
</script>
</head>
<body>
<div id="bar">
<button>
滚动顶部
</button>
<button>
滚动到底部
</button>
<button>
打印基本数据[F12]
</button>
</div>
<div id="test_div">
<div>
div1
</div>
<div>
div2
</div>
<div>
div3
</div>
</div>
</body>
</html>滚动到底部可以通过
getScrollTop() + view.h == getContentSize().h 判断是否滚到底了
这个功能实现我直接用niceScroll实现，因为自己实现的时候发现真正的滚动隐藏是无法接受滚动事件，这样子导致无法隐藏后通过滚动再出现。
自己大概看了一下代码，然后通过开发工具查看，他自己构建2个div分别代替原来的滚动条，通过虚假的滚动条进行滚动，虚假滚动时候触发真正的滚动条，毕竟其他元素都是真正的html，这种实现方式最简单，不然自己还需要实现整个UI。传统的windows directui 基本就是采用这种方式。
资料：
记录自己写网页的时候遇到的一些知识点，同时自己认知的错误，从而进行修正。
自己准备实现类似下面界面的功能
下面加号距离网页底部固定高度【不是固定百分比】，开始没有想到用绝对位置或者固定位置来解决这个问题，原因我是认为top left 必须同时写，认为他是windows界面开发的左定点，这样子就无法实现。后面通过查找资料发现可以单独设置bottom ,代表当前元素底部距离下个块元素的距离。所以认知错误，导致自己无法实现。
html 布局系统记录自己对html 界面开发学习过程，所以很多可能只是基本的知识点。
自己找了一个datetimepicker, 算是比较流行，但自己测试在IE8没法赋值。他的官网是https://xdsoft.net/jqplugins/datetimepicker/。
我从源代码入手，在不同的事件加入日志，最终找到IE8出现代码的地方。
在2573 地方 这里我改成blur,源码对应的blur.xdsoft,第一次看这种写法，自己才最近开始写前端代码，对jquery不是很属性。ie8 选择事件或者点击其他的就会触发blur事件，IE8以上就不会，于是我直接写屏蔽代码。
$('#test').on('blur', function(e){
console.log("test blur")
e.stopImmediatePropagation()
})在html单页面想动态加载html，但设置interHtml发现默认<script></script>不能执行，然后google了一下
interheml 设置的内容会当成普通文本，不会执行里面的Js
我们设置的动态设置的元素，可以动态创建script 替换原来的script就可以触发执行
function createNewElementFromOld(elm, tag){
Array.from(elm.querySelectorAll(tag)).forEach( oldEle => {
const newScript = document.createElement(tag);
Array.from(oldEle.attributes)
.forEach( attr => newScript.setAttribute(attr.name, attr.value) );
newScript.appendChild(document.createTextNode(oldEle.innerHTML));
oldEle.parentNode.replaceChild(newScript, oldEle);
});
}
var setInnerHTML = function(elm, html) {
elm.innerHTML = html;
createNewElementFromOld(elm, "script");
}最近用网页比较多，本来一直想把前端学习，但总没有静下来学习。所以慢慢把一些认为重要的知识点记录下来，我不想学习什么框架，我只要本质的东西
我认为只是一个描述的数据结构，比纯文本更加丰富，下面一段话是维基百科里面，突然猜想word描述文字应该和html类似的技术，因为他word可以很方便转换html，只是描述方法不一样
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素[4]。
我觉得html布局太过于复杂，因为我从windows或者android界面开发过来，突然去写html感觉不是很适应，找不到合适的布局标签来描述界面，比喻用wpf我默认用grid来简单描述大的界面很容易，然后填充控件就可以了，对其也没有那么复杂
。不过基本都是通用的知识，html貌似没有提供那么直接的东西，必须通过div 或者 table 结合 css 来实现，对于新手要做稍微复杂的界面有点绕。不过这是他强大的原因吧。
后续会慢慢补齐文章，布局和对齐，虽然我一直不是很喜欢写界面，更加喜欢业务逻辑代码，但是偶尔写一下也有点意思