动态创建iframe页面内容

<!DOCTYPE html><html><head><title>动态创建iframe页面内容</title><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="content-type" co...

lihefei_coder

15985人浏览 · 2020-04-13 18:30:00

lihefei_coder · 2020-04-13 18:30:00 发布

版本一：通过文本域内容创建iframe页面

<!DOCTYPE html>
<html>
<head>
    <title>创建iframe页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<textarea rows="10" cols="50" placeholder="请输入HTML内容"></textarea>
<br>
<button type="button">创建iframe页面</button>  
<br><br><br>
<script>
	const textarea = document.querySelector('textarea');
	const btn = document.querySelector('button');
	let iframe, frameWin, frameDoc, frameBody;
	btn.addEventListener('click', function(){
		if (!iframe) {
			iframe = document.createElement('iframe');
			document.body.appendChild(iframe);
			iframe.style.cssText = 'width: 400px; height: 200px;';
			iframe.onload = function() {
				frameWin = document.querySelector('iframe').contentWindow;
				frameDoc = frameWin.document;
				frameBody = frameDoc.body;
				frameBody.innerHTML = textarea.value;
			}
		} else {
			frameBody.innerHTML = textarea.value;
		}
	});
</script>
</body>
</html>

在这里插入图片描述

版本二：创建iframe图表页面

<!DOCTYPE html>
<html>
<head>
    <title>创建iframe页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button type="button">创建iframe页面</button>  
<br><br>
<script src="https://cdn.bootcss.com/echarts/3.2.3/echarts.min.js"></script>
<script>
	const textarea = document.querySelector('textarea');
	const btn = document.querySelector('button');
	let iframe, frameWin, frameDoc, frameBody;
	btn.addEventListener('click', function(){
		if (!iframe) {
			iframe = document.createElement('iframe');
			iframe.style.cssText = 'width: 400px; height: 300px;';
			iframe.onload = function() {
				frameWin = document.querySelector('iframe').contentWindow;
				frameDoc = frameWin.document;
				frameBody = frameDoc.body;
				let div = createDiv();
				frameBody.appendChild(div);
				createChart(div);
			}
			document.body.appendChild(iframe); //需要放在iframe的onload事件之后
		} 
	});
	
	// 创建div容器
	function createDiv() {
		let div = document.createElement('div');;
		div = document.createElement('div');
		div.style.cssText = 'width: 100%; height: 100%; background-color: gray';
		return div;
	}
	
	// 创建图表
	function createChart(div) {
	
		const myChart = echarts.init(div);

		// 指定图表的配置项和数据
		const option = {
			title: {
			  text: '未来一周气温变化'         
			},
			tooltip: {},
			legend: {},
			toolbox: {},      
			xAxis: [{         
			  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			}],
			yAxis: { },
			series: [{
			  name: '最高气温',
			  type: 'line',
			  data: [11, 11, 15, 13, 12, 13, 10]          
			},
			{
			  name: '最低气温',
			  type: 'line',
			  data: [1, -2, 2, 5, 3, 2, 0]        
			}]
		};

		// 使用配置项和数据显示图表。
		myChart.setOption(option);
	}
</script>

在这里插入图片描述

版本三：两种混在一起

<!DOCTYPE html>
<html>
<head>
    <title>动态创建iframe页面内容</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<textarea rows="10" cols="50" placeholder="请输入HTML内容"></textarea>
<br>
<button id="createHTMLBtn" type="button">创建iframe文本域内容页面</button>  
<br><br>
<button id="createChartBtn" type="button">创建iframe图表页面</button>  
<br><br><br>
<script src="https://cdn.bootcss.com/echarts/3.2.3/echarts.min.js"></script>
<script>
	const textarea = document.querySelector('textarea');
	const createHTMLBtn = document.querySelector('#createHTMLBtn');
	const createChartBtn = document.querySelector('#createChartBtn');
	
	//点击按钮创建iframe标签
	function createIframe(fn){
		let iframe = document.querySelector('iframe');
		
		if (iframe) {
			let frameWin = document.querySelector('iframe').contentWindow;
			let frameDoc = frameWin.document;
			let frameBody = frameDoc.body;
			fn && fn(iframe,frameBody,frameDoc,frameWin);
		} else {
			iframe = document.createElement('iframe');	
			iframe.style.cssText = 'width: 400px; height: 300px;';
			iframe.onload = function() {
				let frameWin = document.querySelector('iframe').contentWindow;
				let frameDoc = frameWin.document;
				let frameBody = frameDoc.body;
				fn && fn(iframe,frameBody,frameDoc,frameWin);
			}
			document.body.appendChild(iframe);
		} 
	};
	

	
	//点击按钮创建html内容
	createHTMLBtn.addEventListener('click', function(){
		
		createIframe(function(iframe,frameBody){
		debugger;
			frameBody.innerHTML = textarea.value;
		})
	});
	
	//点击按钮创建图表内容
	createChartBtn.addEventListener('click', function(){
	
		createIframe(function(iframe,frameBody){
			createDiv(frameBody, function(div){
				createChart(div);
			});			
		})				
	});
	
	
	// 创建div容器
	function createDiv(frameBody, fn) {
		let div = document.querySelector('div');
		if (!div) {
			div = document.createElement('div');
			div.style.cssText = 'width: 100%; height: 100%; background-color: gray';
			frameBody.innerHTML = '';
			frameBody.appendChild(div);
		}
		fn && fn(div);
	}
	
	// 创建图表
	function createChart(div) {
	
		const myChart = echarts.init(div);

		// 指定图表的配置项和数据
		const option = {
			title: {
			  text: '未来一周气温变化'         
			},
			tooltip: {},
			legend: {},
			toolbox: {},      
			xAxis: [{         
			  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			}],
			yAxis: { },
			series: [{
			  name: '最高气温',
			  type: 'line',
			  data: [11, 11, 15, 13, 12, 13, 10]          
			},
			{
			  name: '最低气温',
			  type: 'line',
			  data: [1, -2, 2, 5, 3, 2, 0]        
			}]
		};

		// 使用配置项和数据显示图表。
		myChart.setOption(option);
	}
</script>
</body>
</html>