cos 或者OSS 网页 IE8访问404

一、问题

自己用COS 的URL 访问HTML 资源,chrome 和firefox ,edge 和 ie11都能正常,但自己用ie8访问会出现跳转到404。

二、排查过程

自己测试各种浏览器,我发现只有在IE8 出现问题,那么证明肯定是IE8兼容性问题,我突然想起自己以前用NODE http 写静态资源,返回数据没有返回对应的content-type,导致在无法访问问题,那么估计就这么问题。

三、结果方案

我开启cos静态资源网站,它的静态网站资源用的不同的url。ie8 不能根据后缀采用对应的content-type,目前主流的浏览器都支持不带content-type,根据后缀才解析。

可编辑Div焦点问题

一,背景

自己最近用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 介绍很少,自己参考别人代码,然后带蒙写的。

nicescroll使用教程

一,基本使用教程

<!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 判断是否滚到底了

html 滚动条没有滚动时候隐藏,滚动时候又显示

这个功能实现我直接用niceScroll实现,因为自己实现的时候发现真正的滚动隐藏是无法接受滚动事件,这样子导致无法隐藏后通过滚动再出现。

自己大概看了一下代码,然后通过开发工具查看,他自己构建2个div分别代替原来的滚动条,通过虚假的滚动条进行滚动,虚假滚动时候触发真正的滚动条,毕竟其他元素都是真正的html,这种实现方式最简单,不然自己还需要实现整个UI。传统的windows directui 基本就是采用这种方式。

资料:

niceScoll github

自定义滚动条

html布局-left bottom

一,背景

记录自己写网页的时候遇到的一些知识点,同时自己认知的错误,从而进行修正。

二,过程

自己准备实现类似下面界面的功能

下面加号距离网页底部固定高度【不是固定百分比】,开始没有想到用绝对位置或者固定位置来解决这个问题,原因我是认为top left 必须同时写,认为他是windows界面开发的左定点,这样子就无法实现。后面通过查找资料发现可以单独设置bottom ,代表当前元素底部距离下个块元素的距离。所以认知错误,导致自己无法实现。


html 布局系统记录自己对html 界面开发学习过程,所以很多可能只是基本的知识点。

juery plugin datetimepicker ie8 兼容处理

一,背景

自己找了一个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()
            })

四,其他

  • 事件选择器也可以用国人开源 http://www.jemui.com/uidoc/jedate.html
  • 引入js要引入build full 的js,不带full没有事件格式对象,估计作者是方便支持第三方格式支持

interHtml不执行script

背景

在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");
  }

html 入门知识记录

背景

最近用网页比较多,本来一直想把前端学习,但总没有静下来学习。所以慢慢把一些认为重要的知识点记录下来,我不想学习什么框架,我只要本质的东西

html的本质:我自己的认为

我认为只是一个描述的数据结构,比纯文本更加丰富,下面一段话是维基百科里面,突然猜想word描述文字应该和html类似的技术,因为他word可以很方便转换html,只是描述方法不一样


超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSSJavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言

HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素(如<html>),浏览器使用HTML标签和脚本来诠释网页内容,但不会将它们显示在页面上。

HTML可以嵌入如JavaScript脚本语言,它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表(CSS)来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟(W3C)鼓励人们使用CSS替代一些用于表现的HTML元素[4]

元素区别

  • 块级元素:占一行
  • 内联元素:反之
  • 2者详细介绍
  • html布局

    我觉得html布局太过于复杂,因为我从windows或者android界面开发过来,突然去写html感觉不是很适应,找不到合适的布局标签来描述界面,比喻用wpf我默认用grid来简单描述大的界面很容易,然后填充控件就可以了,对其也没有那么复杂
    。不过基本都是通用的知识,html貌似没有提供那么直接的东西,必须通过div 或者 table 结合 css 来实现,对于新手要做稍微复杂的界面有点绕。不过这是他强大的原因吧。

    网上的说布局比较好的文章

  • 1:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction
  • 2:https://www.jianshu.com/p/c6673f8a6a5a
  • 3:https://blog.csdn.net/aitangyong/article/details/42775803
  • 总结:

    后续会慢慢补齐文章,布局和对齐,虽然我一直不是很喜欢写界面,更加喜欢业务逻辑代码,但是偶尔写一下也有点意思