简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

html - javascript动态插入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代码，一个列表
    <ul>
        <li>我是主角，点我右边跳到页B<b>点我new A()</b></li>
        <li>我是配角，点我右边跳刀页C</li>
    </ul>
    // 右边iFrame加载对应URL
PHPzPHPz2772 hari yang lalu718

membalas semua(4)saya akan balas

  • 天蓬老师

    天蓬老师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>

    balas
    0
  • PHP中文网

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

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

    balas
    0
  • 怪我咯

    怪我咯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>

    balas
    0
  • 黄舟

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

    结帖，谢谢各位指点。

    balas
    0
  • Batalbalas