• IE6 bug之 无法显示动态创建的iframe


    原文:

    动态弹出浮层,跨域加载一个 iframe 页面,发现 IE6 下无法正常显示。见图所示:

    最初怀疑是 innerHTML 方式创建 iframe 节点导致的:

    document.getElementById('a').innerHTML = '<iframe width="500" height="100" src="http://www.mangguo.org/"></iframe>';

    但这样操作实际测试 IE6 是可以正常显示 iframe 页面的。百度之,发现同类问题有,但大多都是拷贝复制,没一个靠谱的。

    做了几个简单的测试发现,通过 innerHTML 方式创建 iframe 节点,通过 createElement 创建节点再设置 src 属性这两种情况均不存在 IE6 显示空白的情况:

    那么也就剩下一种可能,通过事件触发动态创建 iframe 节点才会导致这种状况,于是又有以下几个测试:

    情况一,触发源是 a 标签
    情况二,触发源是 a 标签,但没有 href 属性
    情况三,触发源是 button 标签:

    document.getElementById('c_btn').onclick = function () {
        document.getElementById('c').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';
    }

    这三种情况下除了第一种 IE6 无法成功加载 iframe,导致 iframe 区块显示空白外,其余情况均正常。也就是说,问题的根源在于点击 a 标签触发加载行为。并不在于使用 innerHTML 方法。通过以下例子(标签 a 触发同时使用 createElement 创建节点)可以验证这一点的正确:

    document.getElementById('d_btn').onclick = function () {
        var el = document.createElement('iframe');
            el.width = '500';
            el.height = '100';
            el.src = 'http://www.mangguo.org/';
        document.getElementById('d').appendChild(el);
    }

    结论:通过 a 标签触发加载 iframe 页面的行为会导致 IE6 下 iframe 页面空白。
    解决方案:创建 DOM 后,再对该 iframe 的 src 进行一次重置:

    iframeEl.src = iframeEl.src;

    或者干脆就不要用 a 标签了。详细请参考我的 demo:ie6_iframe_bug.html

     

    问题原因:

       a标记的href属性是javascript:void(0);引起的,ie6的bug 据说是这个值会使ie6认为动作已经结束所以iframe不加载地址了, 改成### 或者 正常链接组织浏览器默认动作。

    解决方法:

      1、给a加上 onclick="return false;"(参考:ie6 bug之href= “javascript:void(0);”

     

    转自:

      芒果.IE6 动态创建 iframe 无法显示的 bug.芒果小站,http://www.mangguo.org/ie6-can-not-display-a-dynamically-created-iframe-bug/

    知识共享许可协议
    作品Tim Zhang创作,采用知识共享署名 3.0 中国大陆许可协议进行许可。 。
  • 相关阅读:
    4.12 IDEA 如何新建 Java 项目 (图文讲解, 良心教程)
    4.11 AndroidStudio快捷键总结
    4.9 Android AndroidX的迁移
    4.8 build.gradle中正确地导入RecyclerView依赖
    4.6 构建之法7
    4.5 构建之法6
    4.4 构建之法5
    4.3 构建之法4
    4.2 构建之法3
    4.1 构建之法2
  • 原文地址:https://www.cnblogs.com/ccdc/p/2520812.html
Copyright © 2020-2023  润新知