别人的动态生成iframe的代码

动态加载iframe
最新推荐文章于 2022-05-31 15:29:41 发布
最新推荐文章于 2022-05-31 15:29:41 发布
阅读量81 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/jhVwei/archive/2008/12/11/1352456.html
本文介绍了一种使用JavaScript动态创建和加载iframe的方法，通过修改iframe的src属性来切换显示的内容，适用于网页应用中需要根据不同触发事件展示不同页面内容的场景。

function showInfo(event){

var planet = this.id;

var scriptUrl = "script_"+planet+".html";

var dataframe = document.getElementByid("dataframe");

if(!dataframe){

dataframe = document.createElement("iframe");

dataframe.classNaem = 'dataframe';

dataframe.id = 'dataframe';

dataframe.src = scriptUrl;

document.body.appendChild(dataframe);

}else{

dataframe.src=scriptUrl;

}

}

转载于:https://www.cnblogs.com/jhVwei/archive/2008/12/11/1352456.html

UIOTOS 导出部署与集成 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
qq_69807227的博客
08-20 869
UIOTOS页面在编辑状态下可以预览与发布。如下所示：点击预览后，浏览器直接可以看到运行界面。不过预览链接不能直接对外，非本机访问时，会提示页面未分享无权限查看。如果要网络中其他人能查看，需要通过分享，设置分享码和分享过期时间，如下所示：这两种情况，用的是工具自带的web服务，不论是本地安装后局域网内其他人访问，还是公网部署的生成分享链接给其他人。如果不想依赖工具环境，只想生成目标的页面，导出后自行部署，或者跟自己其他产品集成，就涉及都到本节介绍的内容。:::info。
【前端】iframe嵌入单点登录链接后，一直访问登录页面？
m0_74825223的博客
12-19 992
sessionStorage：仅在同一窗口或标签页中共享，不同窗口或标签页之间不共享。Cookies：在同一域名下的所有窗口和标签页之间共享。
动态创建iframe,并动态添加js执行代码
01-22
动态创建iframe,并动态添加js代码动态创建iframe,并动态添加js代码
嵌入式代码生成工具_使用此免费应用程序轻松生成响应式嵌入代码
cune1359的博客
07-04 484
每个网页设计师都知道如何嵌入视频 。 嵌入是与相关媒体共享内容和改善文章的最简单方法。 但是，iframe和其他类似的视频嵌入存在一个问题： 缺少响应式解决方案 。 每个现代网站都具有充分的响应能力，固定视频可以真正中断移动设备上的流量。 要解决此问题，请尝试Embedsensitively.com 。 这个免费的网络应用程序会自动为多种媒体网站生成嵌入代码 ，甚至还支持默认的ifra...
页面套一个iframe，页面如何自动生成iframe告诉，使iframe高度自适应
蔡龙的技术交流站
06-15 1417
最近遇见一个问题，一个页面套了一个iframe标签，iframe子页面内容高度不固定，如何保证让父页面高度自动按照iframe的高度来生成，不生成滚动条？ 页面标签（注意：ifame一定要写onload标签） <div> <iframe id="index" class="map-container ifm" style="width: 100%;" src="" ...
怎么使其生成的链接只能看到画面但是看不到具体代码呢？
02-20
嗯，用户之前问了关于CodePen生成专属链接是否需要登录的问题，现在他们又想知道如何让生成的链接只能看到画面而看不到代码。我需要仔细分析这个问题，并给出准确的解决方案。 首先，用户可能是在分享作品时，希望...
怎样获取不同域名的ifram的html,AJAX | iframe跨域的实现方法
weixin_33146151的博客
05-31 1189
iframe跨域HTML5学堂：本文当中我们介绍了跨域的基本知识，讲解到了跨域的相关种类，并讲解了解决跨域中的一种方法——如何使用iframe跨域。讲解了iframe跨域的基本原理与流程，并配以实战~利利的独白：跨域，是我们的课程中必不可少的一部分，但是我们一直都是在讲解JSONP的跨域方式，虽然也提到了iframe的跨域方式，但是由于时间因素，并没有办法放置到课程中。什么是跨域同源策略限制了一个...
Iframe嵌入别人的系统，通过给对方一个token实现免登录
最新发布
06-12
代码示例（父系统前端部分）：在Vue框架下的示例：```html<template><iframe:src="targetUrl"frameborder="0"width="100%"height="600px"></iframe></template><script>exportdefault{data(){return{//假设从后端...
前端开发人员_前端开发人员的10个安全提示
weixin_26722031的博客
07-30 717
前端开发人员Web security is a topic that is often overlooked by frontend developers. When we assess the quality of the website, we often look at metrics like performance, SEO-friendliness, and accessibility...
HTML iframe 实现功能页面动态切换
boonyaxnn的博客
09-08 1万+
Iframe .left{ color:#0F0; border: #0F6 1px solid; width:20%; height:300px; float:left; text-align:center; } .right{ color
跨域问题（iframe）记录
热门推荐
haliofwu的专栏
04-10 2万+
an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’ 场景描述： iframe内嵌jupyter页面； 本地安装jupyter,命令行jupyter notebook开启，在本地开发环境下的页面内嵌入iframe &lt;div id="left...
iframe的优缺点及改进方法(有实例代码)
web前端开发博客
05-31 2928
iframe是用来内嵌网页的，使用起来很方便，但也有优缺点，比如iframe能原封不动地把嵌入的网页展现出来，如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷，iframe缺点会阻塞主页面的Onload事件，但有针对iframe的优缺点及改进方法。 一、iframe内嵌网页使用实例代码： <iframe width="100%" height="100%" frameborder="0" scrolling="auto" allow.
根据iframe的内容，动态改变iframe的高度
zqq3436的博客
01-21 5195
//1.获取iframe var iframe = document.getElementById('mainFrame'); //2.获取iframe的body标签 var body = iframe.contentWindow.document.body; //3.获取iframe中body标签下的某个div的高度 var ght = $(body).find("#orgTree").hei...
js动态生成iframe
11-12
JavaScript动态生成IFrame通常用于嵌入外部内容、加载异步页面或者创建可交互的应用程序片段。以下是使用JavaScript动态创建IFrame的基本步骤： 1. 创建一个新的IFrame元素： ```javascript var iframe = document.createElement('iframe'); ``` 2. 设置IFrame属性，比如src（要加载的URL）、width、height等： ```javascript iframe.src = 'https://www.example.com'; // 要加载的网页地址 iframe.width = '800px'; iframe.height = '600px'; ``` 3. 可选地设置其他属性，如边框、名称等： ```javascript iframe.style.border = 'none'; // 隐藏边框 iframe.name = 'myIframe'; // 如果需要给IFrame命名 ``` 4. 将新创建的IFrame添加到DOM中，通常是文档的body部分： ```javascript document.body.appendChild(iframe); ``` 完整示例： ```javascript var iframe = document.createElement('iframe'); iframe.src = "https://www.example.com"; iframe.id = "dynamic_iframe"; // 给IFrame一个id以便后续操作 iframe.style.display = "none"; // 初始隐藏 // 添加到文档底部（为了演示） document.body.appendChild(iframe); // 当然，你也可以选择特定位置插入 // var targetDiv = document.getElementById("target"); // 获取你想插入的位置元素 // targetDiv.appendChild(iframe); // 显示IFrame setTimeout(function() { iframe.style.display = "block"; }, 1000); // 等待1秒后再显示 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值