版本一：通过文本域内容创建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="/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="/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>
