关于insertAdjacentHTML兼容ff的问题

Posted 2023-03-29

近来做个网站，需要不断插入一段html，还要保持前面插入的内容不能变化，本来用innerHTML的，但这个不能保证前面内容不变，后改insertAdjacentHTML可fixfox不兼容，网上好多人提到下面这个函数，可我测试老是提示“el.ownerDocument is undefined”，不能用 郁闷啊 高手指点

function insertHtml(where, el, html)

where = where.toLowerCase();
if(el.insertAdjacentHTML)
switch(where)
case "beforebegin":
el.insertAdjacentHTML('BeforeBegin', html);
return el.previousSibling;
case "afterbegin":
el.insertAdjacentHTML('AfterBegin', html);
return el.firstChild;
case "beforeend":
el.insertAdjacentHTML('BeforeEnd', html);
return el.lastChild;
case "afterend":
el.insertAdjacentHTML('AfterEnd', html);
return el.nextSibling;

throw 'Illegal insertion point -> "' + where + '"';

var range =el.ownerDocument.createRange();
var frag;
switch(where)
case "beforebegin":
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case "afterbegin":
if(el.firstChild)
range.setStartBefore(el.firstChild);
frag = range.createContextualFragment(html);
el.insertBefore(frag, el.firstChild);
return el.firstChild;
else
el.innerHTML = html;
return el.firstChild;

case "beforeend":
if(el.lastChild)
range.setStartAfter(el.lastChild);
frag = range.createContextualFragment(html);
el.appendChild(frag);
return el.lastChild;
else
el.innerHTML = html;
return el.lastChild;

case "afterend":
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;

throw 'Illegal insertion point -> "' + where + '"';

参考技术A 请问你是如何调用函数的？

insertHtml("beforeBegin", "testID", "<div>test</div>");报错

insertHtml("beforeBegin", document.getElementById("testID"), ""<div>test</div>");不报错

关于浏览器滚动的兼容性问题以及事件绑定

废话不多说，看下面

DOMMouseScroll　　这个是FF的早期方法，现在版本的FF依然可以使用(亲测)

onmousewheel　　　这个是Chrome、IE的兼容方法，手动划重点！并且这个方法IE版本全兼容

onwheel　　　　　　这个方法Chrome、FF兼容，但是IE全不兼容

 

所以以上方法怎么用应该不必多说了吧

不过有一个注意点我还是要讲一下

关于DOMMouseScroll这个方法必须使用addEventListener绑定方法来绑定

如果你不知到addEventListener方法是什么你可以继续往下看

------------------------------------------------------------------------------------------------------

如果你只是想要知道浏览器的滚动事件方法，那么下面其实你是没有必要看的

------------------------------------------------------------------------------------------------------

不过我们还是要说一下绑定事件需要注意的一些地方

绑定事件有三种方法：

1.使用"句柄"绑定(名字高大尚，内容很简单)

所谓的"句柄绑定"就是直接在需要绑定的事件后面添加函数，往下看就明白了

假如我们给DOM元素绑定一个点击(click)事件，我们就可以这么写

DOM.onclick = function () {};

很简单的一种方法，但是很常用，兼容性很好IE、Chrome、FF都支持（古老的IE5都支持）

 

2.使用"addEventListener"方法绑定

DOM.addEventListener("click", function () {}, false);

注意对比我用红色标注的地方，"句柄绑定" 和 "addEventListener"表面上的区别就是一个有"on",一个没有的区别

其实他们还有更加细致的区别，不过本章我们就不太多讲了，等到下下篇再讲（因为下篇我们讲浏览器如何阻止默认事件，有兴趣的话可以看一下）

其实这个方法的第三个参数比较有意思，很多人都是在最后写一个false，但是不知道这个代表什么意思，所以这个false又是什么意思呢？可不可以用true呢？用true和用false又有什么区别呢？

我们会在以后的文章中仔细讲解，先透露一下，这个参数是和事件冒泡和事件捕获有关系的，有兴趣的可以先去了解一下

 

3.使用"attachEvent"方法绑定

DOM.attachEvent("onclick", function () {});

大家可以自行对比这个方法和上面两个方法的区别，这个方法和第二个方法有点像，但是区别还是很明显的，我们本章也不详细讲解，以后再说

其实这个方法放到这里还是有原因的，什么原因你能猜到吗

 

 

原因就是这个方法特别有局限性，这个方法是IE8以下的一个方法，IE9以上就不再对这个方法兼容了( 把自己的方法抛弃了... )

所以这个方法使用的比较少，即使你要兼容IE8以下版本的浏览器，你完全可以使用第一个"句柄绑定"的方法

虽然说这个方法比较有局限，但是我们还是会在之后的文章中细致的讲解的

 

到此，本篇完，感谢你能在我这么啰嗦的情况下看完，不容易啊，再次感谢

 

 

下一篇预告：如何阻止浏览器的默认事件（重点是如何阻止Chrome默认事件）

 

本篇全部原创