社群 學習 工具庫 休閒
搜尋
繁体中文
html - javascript动态插入DOM节点详细过程如何
PHPz
PHPz 2017-04-11 12:29:48
0
4
724

  • 小伙伴为了性能，把创建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是不是废弃了？

PHPz
PHPz

学习是最好的投资！

全部回覆(4)
Peter_Zhu
Peter_Zhu2017-04-11 12:31:48 4樓

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

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>
點贊 +0
新增回覆
洪涛
洪涛2017-04-11 12:31:48 3樓

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

點贊 +0
新增回覆
刘奇
刘奇2017-04-11 12:31:48 2樓

有点不是很懂你的意思、不过我改进了一下。
首先你有两个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>
點贊 +0
新增回覆
黄舟
黄舟2017-04-11 12:31:48 1樓

结帖，谢谢各位指点。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板