- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
小伙伴为了性能，把创建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是不是废弃了？
天蓬老师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>
怪我咯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>