undefinedfix
Sign in

How about the detailed process of JavaScript dynamic insertion into DOM node

JSPDeveloper01 edited in Sat, 05 Dec 2020
  • For the sake of performance, I store the process of creating DOM in memory, as follows
    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)*/ }
  • The business environment is the iframe structure
    // 左边iFrame代码,一个列表
    <ul>
        <li>我是主角,点我右边跳到页B<b>点我new A()</b></li>
        <li>我是配角,点我右边跳刀页C</li>
    </ul>
    // 右边iFrame加载对应URL
  • The operation process isFirst, click the protagonist, load B on the right, and then click new a (). The generated DOM object event is valid, and 123Next, click supporting role, load C on the right, and then click new a (). DOM is also generated, but the click event is invalidFinally, click the protagonist, load B on the right, and then click new a () to generate DOM, but the click event is invalid
  • Is it a DOM reference problem? After the right iframe refreshes this.dom Is it abandoned?
4 Replies
lnhzw
commented on Sat, 05 Dec 2020

I didn't quite understand it, but I wrote it according to your meaning, which can be implemented

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>
Amer
commented on Sat, 05 Dec 2020

Binding events need to listen to the load event of iframe. In addition, if jQuery is used, the $in iframe is not the same as the parent page

AfajarS
commented on Sun, 06 Dec 2020

I don't quite understand what you mean, but I improved it. First of all, you have two iframes. Using a new a () can't achieve the effect you want. Returned this.dom It's not the designated one.

<!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>
Emilia
commented on Sun, 06 Dec 2020

Thank you for your advice.

lock This question has been locked and the reply function has been disabled.