通過文本域內容創建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);
}
});
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>
![在這裏插入圖片描述]()
