标签：function return iframe emsp html 插入 添加 background document
目录
一、嵌入窗口iframe和添加、删除、插入、替换
主界面：
background.html：
iframe.html：
1、添加
添加一个窗体：
2、删除
初始状态：
删除嵌入页面1：
3、插入
初始状态：
插入background.html到第二个页面前：
4、替换
初始状态：
将嵌入页面1替换为background.html：
二、完整代码：
1、 main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Replacing Nodes</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<form action="#">
<div>请输入地址：       background.html iframe.html</div>
<p><input type="text" id="url" value="background.html"/></p>
<p><label><input type="radio" name="nodeAction" />添加</label>
<label><input type="radio" name="nodeAction" />删除</label>
<label><input type="radio" name="nodeAction" />插入</label>
<label><input type="radio" name="nodeAction" />替换</label></p>
页面选择: <select id="grafCount"></select>
<input type="submit" value="提交" />
</form>
<div id="modifiable"> </div>
</body>
</html>
2、background.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
body{
background-image: url("img/bg.jpg");
background-size:cover; /* 让背景图基于容器大小伸缩 */
background-attachment:fixed; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ //此条属性必须设置否则可能无效/
background-color:#CCCCCC; /* 设置背景颜色，背景图加载过程中会显示背景色 */
background-position: center top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
3、iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
<p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
<p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
<p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
</body>
</html>
4、main.js
window.onload = initAll;
function initAll() {
document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
chgNodes.init();
}
function nodeChanger() {
return chgNodes.doAction();
}
var chgNodes = {
actionType : function() {
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
for (var i=0; i<radioButtonSet.length; i++) {
if (radioButtonSet[i].checked) {
return i;
}
}
return -1;
},
allGrafs : function() {
return this.nodeChgArea.getElementsByTagName("p");
},
pGrafCt : function() {
return this.allGrafs().length;
},
inText : function() {
return document.getElementById("url").value;
},
grafChoice : function() {
return document.getElementById("grafCount").selectedIndex;
},
newGraf : function() {
var myNewGraf = document.createElement("p");
var url = this.inText()
myNewGraf.innerHTML = ' <iframe id="iframe" src="'+ url+ '" width="400px" height="150px" frameborder="1" scrolling="yes"></iframe>';
return myNewGraf;
},
oldGraf : function () {
return this.allGrafs().item(this.grafChoice());
},
doAction : function() {
switch(this.actionType()) {
case 0:
this.nodeChgArea.appendChild(this.newGraf());
break;
case 1:
if (this.pGrafCt() > 0) {
this.nodeChgArea.removeChild(this.oldGraf());
break;
}
case 2:
if (this.pGrafCt() > 0) {
this.nodeChgArea.insertBefore(this.newGraf(),this.oldGraf());
break;
}
case 3:
if (this.pGrafCt() > 0) {
this.nodeChgArea.replaceChild(this.newGraf(),this.oldGraf());
break;
}
default:
alert("No valid action was chosen");
}
document.getElementById("grafCount").options.length = 0;
for (var i=0; i<this.pGrafCt(); i++) {
document.getElementById("grafCount").options[i] = new Option(i+1);
}
return false;
},
init : function() {
this.nodeChgArea = document.getElementById("modifiable");
}
}
标签：function,return,iframe,emsp,html,插入,添加,background,document 来源： https://blog.csdn.net/weixin_46822367/article/details/117934832
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。