Internet Explorer 'InsertHTML' 兼容性问题答案

【问题标题】：Internet Explorer 'InsertHTML' compatibility issueInternet Explorer 'InsertHTML' 兼容性问题
【发布时间】：2014-02-02 07:58:29
【问题描述】：

我目前在使用 Internet Explorer 和我创建的 Javascript 时遇到问题。我一直在试图找出不兼容问题的根源，但我一直无法确定它。

这在 Firefox 26 中运行良好，但在 Internet Explorer 11 中似乎并没有真正生成表格。

function InsertTable()
{
column = document.getElementById("Columns").value
row = document.getElementById("Rows").value

cellwidth = 100 / column

table = '<table width="100%" border="2px">'

while(row > 0)
{
columncopy = column
table = table + '<tr>'

while(columncopy > 0)
{
table = table + '<td width="' + cellwidth + '%"></td>'
columncopy = columncopy - 1;
}

table = table + '</tr>'
row = row - 1;
}

table = table + '</table>'

document.getElementById("mainedit").focus();
document.execCommand('insertHTML', false, table);


}

更新：我设法将问题缩小到一行代码，它正在处理整个事情，实际上并没有正确放置它。

document.execCommand('insertHTML', false, table);

是问题的根源。

【问题讨论】：

您使用的是哪个版本的 Internet Explorer？
我使用的是 IE 11，它只是不想生成表格。我尝试添加一些调试内容，但无法找到问题的根源。
Firefox 26 整个过程没有任何问题，表格生成正确，没有任何错误。当函数被调用时，Internet Explorer 11 根本没有做任何事情，就好像它卡在某个地方一样。
欢迎来到地狱 :) 浏览器兼容性是开发人员最喜欢的情事 :) 第一步 - 访问 caniuse.com 看看是否有任何兼容性问题。下一步 - 使用modernizr - modernizr.com.
我已经调查过了，Internet Explorer 11 不支持“insertHTML”。

标签： javascript compatibility backwards-compatibility

【解决方案1】：

找到如下代码，按照如下方式集成。

html = table

IE()


function IE()
{

var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // only relatively recently standardized and is not supported in
        // some browsers (IE9, for one)
        var el = document.createElement("mainedit");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
}


}

【讨论】：

嗨，这适用于 IE 11 吗？我尝试使用此解决方案，但似乎 IE 11 为 sel.rangeCount() 返回 0。顺便说一句，我想将 HTML 插入 iframe。