动态创建iframe页面内容

通过文本域内容创建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>

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章