iframe的添加、删除、插入、替换

最新推荐文章于 2024-05-08 13:56:33 发布

爱打羽球的码猿

最新推荐文章于 2024-05-08 13:56:33 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_46822367/article/details/117934832

版权

JavaScript 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

一、嵌入窗口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>请输入地址：&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;background.html &nbsp;&nbsp;&nbsp;&nbsp;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");
	}	
}

爱打羽球的码猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe的添加、删除、插入、替换

目录一、嵌入窗口iframe和添加、删除、插入、替换1、添加2、删除3、插入4、替换二、完整代码：1、 main.html2、background.html3、iframe.html4、main.js一、嵌入窗口iframe和添加、删除、插入、替换主界面：background.html：iframe.html：1、添加添加一个窗体：2、删除初始状态：删除嵌入页面1：3、插入初始状态：插入background.html到第二个页面前：4
复制链接

扫一扫