html - javascript动态插入DOM节点详细过程如何

问题描述

问 题

• 小伙伴为了性能，把创建DOM过程存放在内存中，大致如下

    function A(){ 
        if(!this.dom){
            this.dom = this.create()
            this.bindEvent()
            this.append()
        }
        else {
            /* OOXX */ 
            this.append()
        }
    }
    A.prototype.create = function(){/* 创建DOM对象 append到右侧iFrame */}
    A.prototype.append = function(){/* 把this.dom追加到父容器 假定是body */}
    A.prototype.bindEvent = function(){ /* 绑定事件 click, alert(123)*/ }

• 业务环境是左右iFrame结构

    // 左边iFrame代码，一个列表
    <ul>
        <li>我是主角，点我右边跳到页B<b>点我new A()</b></li>
        <li>我是配角，点我右边跳刀页C</li>
    </ul>
    // 右边iFrame加载对应URL

• 操作流程是

  • 先点击主角，右边加载B，然后点击new A()，生成的DOM对象事件有效，弹出123

  • 接着点击配角，右边加载C，然后点击new A()，同样生成DOM，但是点击事件无效

  • 最后点击主角，右边加载B，然后点击new A()，生成DOM，但是点击事件无效

• 是DOM引用的问题吗？右侧iFrame刷新后this.dom是不是废弃了？

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

没太看懂，但是我大致按照你的意思写了一下，可以执行

index.html

<iframe src="A.html" width="" height=""></iframe>
<iframe src="null" name="frame" id="frame" width="" height=""></iframe>

A.html

<ul>
    <li><a href="B.html" target="frame">我是主角，点我右边跳到页B</a><b onclick="new A()">点我new A()</b></li>
    <li><a href="C.html" target="frame">我是配角，点我右边跳刀页C</a></li>
</ul>
<script type="text/javascript">
    function A() {
        if (!this.dom) {
            this.dom = this.create()
            this.bindEvent()
            this.append()
        } else {
            /* OOXX */
            this.append()
        }
    }
    A.prototype.create = function() {
        /* 创建DOM对象 append到右侧iFrame */
        return document.createElement('div');
    }
    A.prototype.append = function() {
        /* 把this.dom追加到父容器 假定是body */
        top.document.getElementById('frame').contentDocument.body.appendChild(this.dom);
    }
    A.prototype.bindEvent = function() {
        /* 绑定事件 click, alert(123)*/
        this.dom.addEventListener('click', function() {
            alert(1)
        }, false);
    }
</script>

B.html

<style media="screen">
  div{
    height: 100px;
    width: 100px;
    background: green;
  }
</style>

C.html

<style media="screen">
  div{
    height: 100px;
    width: 100px;
    background: red;
  }
</style>

这篇关于html - javascript动态插入DOM节点详细过程如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！