动态创建iframe页面内容
2024-05-12 10:46:01
版本一：通过文本域内容创建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>
动态创建iframe页面内容相关推荐
- IE7下动态创建Iframe时，去除边框
IE7下动态创建Iframe时,去除边框 2008-09-24 12:04 大家都知道,只要设置Iframe的属性:frameborder="0",Iframe就不显示边框,但是当 ...
- jquery 动态加载html,jQuery – 动态创建iframe并加载页面
[html] /** 弹出iframe页面(iframe后面会添加灰色蒙版) **/ function showIframe(url,w,h){ //添加iframe var if_w = w; va ...
- htmlunit爬虫工具使用--模拟浏览器发送请求，获取JS动态生成的页面内容
Htmlunit是一款模拟浏览抓取页面内容的java框架,具有js解析引擎(rhino),可以解析页面的js脚本,得到完整的页面内容,特殊适合于这种非完整页面的站点抓取. 下载地址: https:// ...
- jQuery实现滚动时动态加载页面内容
有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- jQuery获取动态创建元素的内容
比如以下代码: <body> <table id="tab" border="1" width="30%"> < ...
- vue 中嵌入iframe页面
使用的是vue-element-admin. 需求 项目需求是在点击左边侧边栏的时候判断如果是外部的页面之后,将此页面在右侧打开,每打开一个,tagview中也会相应加上,当切换这些tagview时, ...
- HTML使用iframe元素实现页面内容的跳转功能
HTML使用iframe元素实现页面内容的跳转功能 前言 一.iframe是什么? 二.iframe的使用 1.主页面内容代码 2.内容页面代码 总结 前言 在前端的学习中,不免有一些页面的跳转功能的 ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下:方式1://注意:下面的代码是放在和iframe同一个页面中调用 $("#ifr ...
- 也谈WEB打印（四）：让我们的模板支持打印，并根据内容动态的生成页面
在上一篇文章<也谈WEB打印(三):抛开IE,实现我们自己的打印模板>中,我们写了一个自己的打印模板,然而,该模板并不支持打印,也只能显示2个页面.在本文,我们继续完善该模板,以让他支持打 ...
- vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园 项目预览地址:https://volodya-01.github.io/vue2.0_t ...
最新文章
- C#中提供的精准测试程序运行时间的类Stopwatch
- 486. Predict the Winner | 486. 预测赢家（博弈论）
- labelme实例分割_GitHub：图像分割最全资料集锦
- 美团买菜：采购量提升至平时3-4倍 提供无接触配送服务
- 2021第一波新年（春节）中国风插画设计，为年底储备素材
- c# mysql 汉字乱码_在C#和MySQL中存取中文字符时避免乱码的方法
- LightOJ 1245 - Harmonic Number (II)
- msclass 文字滚动_MSClass (通用不间断滚动JS封装类)
- Weex BindingX 尝鲜
- HTML显示日期时间代码
- matlab中输入数学符号,matlab 数学符号输入
- 皮尔森相关系数的python实现_深入理解皮尔逊相关系数python代码
- 广州车展直击：全新“机甲科技”沙龙机甲龙全球首发
- 内网穿透-Frp（1）使用樱花Frp（Sakura Frp）进行免费的内网穿透操作步骤
- 华师大 OJ 3026
- 我今天才知道，原来蒙古包是没有地址的？！
- 安卓查看中文官网、API、安卓文档
- 月薪 2 万到 3 万的测试员一天是怎样度过的？
- 好看的多级菜单html,jQuery实现美观的多级动画效果菜单代码
- 365天挑战LeetCode1000题——Day 117 数位DP I
热门文章
- 云南省初中计算机考试试题,云南省初中学业水平考试信息技术(中考)总复习资料+信息技术中考复习题...
- 梦殇 chapter four
- 数据结构c语言版ppt答案,《数据结构(C语言版)》习题答案.ppt
- android内部测试注册,马化腾也感受到了压力，开启微信号修改内测，安卓和iOS都可以...
- 万兆网络传输速度测试_Intel万兆网卡的真实测试万兆速度的方法13718565365
- Linux查看及测试网络
- 2021 个人成长复盘
- 离散化-利用计算机求解y=x,离散信号处理（双语）-中国大学mooc-题库零氪
- facebook登陆接入
- 05.Django基础五之django模型层(一)单表操作