小伙伴为了性能，把创建DOM过程存放在内存中，大致如下 {代码...} 业务环境是左右iFrame结构 {代码...} 操作流程是先点击主角，右边加载B，然后点击new A()，生成的DOM对象事件有效，弹出123 接着点击配角，右边...

html - javascript动态插入DOM节点详细过程如何-PHP中文網路問答

天蓬老师2017-04-11 12:31:48

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

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('p');
    }
    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">
  p{
    height: 100px;
    width: 100px;
    background: green;
  }
</style>

C.html

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

回覆

PHP中文网2017-04-11 12:31:48

绑定事件需要监听iframe的load事件另外 jQuery的话iframe里面的$和父页面不是一个

回覆

怪我咯2017-04-11 12:31:48

有点不是很懂你的意思、不过我改进了一下。
首先你有两个iframe，用一个new A()是达不到你想要的效果的。
返回的 this.dom也不是指定的一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<iframe id="iframeA"></iframe>

<hr>
<button id="a">我是主角，点我右边跳到页A</button>
<button id="b">点我new A()</button>
<button id="c">我是配角，点我右边跳刀页B</button>
<hr>

<iframe id="iframeB"></iframe>

<script type="text/javascript">

    var a = document.getElementById('a');
    var b = document.getElementById('b');
    var c = document.getElementById('c');
    var iframeA = document.getElementById('iframeA');
    var iframeB = document.getElementById('iframeB');

    a.onclick = function () {
        iframeA.src = 'a.html';
        new A('iframeA');
    };
    c.onclick = function () {
        iframeB.src = 'b.html';
        new A('iframeB');
    };
    b.onclick = function () {
        alert('我建议事件应该紧接着DOM生成的时候创建');
    };

    function A(iframe) {
        if (!this.dom) {
            this.dom = this.create(iframe);
            this.bindEvent(iframe)
        }
        else {
        }
    }
    A.prototype.create = function (iframe) {
        return document.getElementById(iframe);
    };
    A.prototype.bindEvent = function (iframe) {
        this.dom.contentWindow.document.getElementById('btn').onclick = function () {
            alert('Click Me ' + iframe);
        }
    }

</script>

</body>
</html>

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="btn">button - a.html</button>
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="btn">button - b.html</button>
</body>
</html>

回覆

黄舟2017-04-11 12:31:48

结帖，谢谢各位指点。

回覆

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

全部回覆(4)我來回復