动态加载iframe和关闭

最新推荐文章于 2023-04-17 14:49:31 发布
最新推荐文章于 2023-04-17 14:49:31 发布
阅读量6.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： iframe stylesheet javascript class internet basic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/applicationresource/article/details/4903903

 

 

<!-- rails -->

<%= stylesheet_link_tag 'scaffold' %>

 

  <%= stylesheet_link_tag "tdbank/hoverbox.css" ,media="screen, projection"%>

  <!--[if lte IE 7]>

  <%= stylesheet_link_tag "tdbank/ie_fixes.css" ,media="screen, projection"%>

<![endif]-->

<style type="text/css">

 

  #nav{}

  #iframs{ clear:both}

</style>

<script type="text/javascript">

  var act;

  function Iframe_close(id){

    document.getElementById("iframs").removeChild(document.getElementById("f"+id));

    document.getElementById("iframe_a_"+id).removeChild(document.getElementById("iframe_img_"+id));

    document.getElementById("iframs").removeChild(document.getElementById("iframe_a_"+id));

  };

 

  function CreateIframe(id,url){

    var iframe_a = document.createElement("a");

    iframe_a.href = "javascript:Iframe_close("+id+")";

    iframe_a.id = "iframe_a_"+id;

 

    var iframe_img = document.createElement("img");

    iframe_img.src="/images/tdbank/close.gif";

    iframe_img.align = "right";

    iframe_img.id = "iframe_img_"+id;

 

    var iframe = document.createElement("iframe");

    iframe.setAttribute("id","f"+id);

    iframe.setAttribute("src",url);

    iframe.setAttribute("width",800);

    iframe.setAttribute("height",450);

    document.getElementById("iframs").appendChild(iframe_a);

    document.getElementById("iframe_a_"+id).appendChild(iframe_img);

    document.getElementById("iframs").appendChild(iframe);

  }

</script>

<body>

  <h1>我要申请</h1>

  <div id="nav">

    <ul class="hoverbox">

      <li>

         <a href="javascript:CreateIframe('1','http://localhost:3000/beiju')">

              <img src="/images/poor.s.gif" alt="C账号" />

              <img src="/images/poor.s.gif" alt="C账号" class="preview" />

         </a>

      </li>

      <li>

          <a href="javascript:CreateIframe('2','http://localhost:3000/beiju')">

            <img src="/images/rich.s.gif" alt="B账号" />

            <img src="/images/rich.s.gif" alt="B账号" class="preview" />

          </a>

      </li>

      <li>

          <a href="javascript:CreateIframe('3','http://localhost:3000/beiju')">

            <img src="/images/order.png" alt="订单" />

            <img src="/images/order.png" alt="订单" class="preview" />

          </a>

      </li>

      <li>

          <a href="javascript:CreateIframe('4','/http://localhost:3000/beiju')">

            <img src="/images/your_choice.png" alt="next" />

            <img src="/images/your_choice.png" alt="next" class="preview" />

          </a>

      </li>

    </ul>

  </div>

  <div id="iframs">

  </div>

</body>

 

 

[ie_fixes.css]

/* =Internet Explorer Fixes

----------------------------------------------------------------------*/

 

.hoverbox a

{

position: relative;

}

 

.hoverbox a:hover

{

display: block;

font-size: 100%;

z-index: 1;

}

 

.hoverbox a:hover .preview

{

top: -38px;

left: -50px;

}

 

.hoverbox li

{

position: static;

}

 

 

 

[hoverbox.css]

 

 

 

*

{

border: 0;

margin: 0;

padding: 0;

}

 

/* =Basic HTML, Non-essential

----------------------------------------------------------------------*/

 

a

{

text-decoration: none;

}

 

body

{

background: #fff;

color: #777;

margin: 0 auto;

padding: 50px;

position: relative;

width: 820px;

}

 

h1

{

background: inherit;

border-bottom: 1px dashed #ccc;

color: #933;

font: 17px Georgia, serif;

margin: 0 0 10px;

padding: 0 0 5px;

text-align: center;

}

 

p

{

clear: both;

font: 10px Verdana, sans-serif;

padding: 10px 0;

text-align: center;

}

 

p a

{

background: inherit;

color: #777;

}

 

p a:hover

{

background: inherit;

color: #000;

}

 

/* =Hoverbox Code

----------------------------------------------------------------------*/

 

.hoverbox

{

cursor: default;

list-style: none;

}

 

.hoverbox a

{

cursor: default;

}

 

.hoverbox a .preview

{

display: none;

}

 

.hoverbox a:hover .preview

{

display: block;

position: absolute;

top: -33px;

left: -45px;

z-index: 1;

}

 

.hoverbox img

{

background: #fff;

border-color: #aaa #ccc #ddd #bbb;

border-style: solid;

border-width: 1px;

color: inherit;

padding: 2px;

vertical-align: top;

width: 100px;

height: 75px;

}

 

.hoverbox li

{

background: #eee;

border-color: #ddd #bbb #aaa #ccc;

border-style: solid;

border-width: 1px;

color: inherit;

display: inline;

float: left;

margin: 3px;

padding: 5px;

position: relative;

}

 

.hoverbox .preview

{

border-color: #000;

width: 200px;

height: 150px;

}

 

 

js 实现 动态添加iframe框架
03-31
js 实现 动态添加iframe框架! 值得下载看看!资源免费,大家分享!!
asp.net 中使用iframe动态加载页面
10-23
asp.net 中使用iframe动态加载页面
页面动态加载Iframe文件
weixin_30437481的博客
10-28 354
常常需要在页面中嵌入iframe地址，但通常加载iframe会影响到页面打开速度。js可以动态的嵌入iframe，如果需要也可以在某事件触发时进行相关的操作，从而提高页面响应速度。 js动态加载iframe代码如下: functionLoadIframe(){varnewIframeObject=document.createElem...
iframe 页面加载关闭问题 《总结1》
weixin_43650690的博客
12-06 443
最近项目遇到的几个小问题总结： 1》 iframe加载的页面在关闭时 突然返回不了 ，或直接返回到当前 iframe加载的页面 解决方法  parent.location.reload();  
iframe的使用动态添加
wangyingying12的博客
04-17 6878
window.postMessage() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。在iframe的子页面中需要发出事件，让父页面销毁。在引入iframe的index.html页面。
layer iframe 设置关闭按钮的方法
12-09
在上述标题和描述中，我们关注的是如何在 Layer 的 iframe 弹窗中添加关闭按钮并进行样式调整。 首先，我们来看一下设置关闭按钮的基本代码： ```javascript layer.open({ type: 2, title: 'XXXX网吧历史更多...
基于js的iframe 可关闭tab标签组件使用方法
01-12
然后，编写JavaScript代码来实现tab切换和iframe加载。 ```javascript $(document).ready(function() { // 隐藏所有iframe，只显示第一个 $('#content').attr('src', '初始页面的URL'); $('.tab-btn').first()....
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
10-18
Layer是一款非常流行的JavaScript弹窗插件，它提供了丰富的弹出样式和功能，包括弹出iframe层。本篇文章将详细讲解如何在Layer弹出的iframe层执行完毕后自动关闭当前弹出层。 Layer弹出的iframe层通常用于加载外部...
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
10-16
通过以上方法，开发者能够灵活地控制和管理Layer组件中的多个iframe弹出层，实现复杂的应用场景，如页面间的交互、数据传递和状态管理。在实际项目中，根据具体需求选择合适的方法进行组合使用，可以大大提升用户...
iframe 标签(用于嵌套网页)及loading加载动画效果
热门推荐
m0_58293192的博客
12-16 2万+
iframe 标签(用于嵌套网页)及loading加载动画效果
动态创建iframe,并动态添加js执行代码
01-22
动态创建iframe,并动态添加js代码动态创建iframe,并动态添加js代码
iframe如何动态创建及释放其所占内存
09-04
一个项目后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显，下面与大家分享下iframe动态创建及释放内存
jq替换iframe里面视频关闭自动播放的功能
12-11
通过jq把ifram里面的视频转换成不自动播放的视频。 希望有需要的同志们采纳一下。
如何关闭html上嵌入的iframe的问题
angus.dai的博客
11-25 4921
父页面 在iframe 页面加上 parent.document.getElementById("dep_select").style.display = "none";即可
动态创建iframe页面内容
lihefei_coder的博客
04-13 1万+
<!DOCTYPE html> <html> <head> <title>动态创建iframe页面内容</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" co...
iframe动态创建及释放内存
时光留不住，毕竟东流去
07-27 1641
近期參与一个项目的开发，因为项目是基于浏览器的胖client（RIA）应用程序，页面中大量调用iframe。后期測试发现浏览器内存一直居高不下，并且打开iframe页面越多内存占用越大。在IE系列浏览器中尤其明显。全部打开的iframe页面即使关闭了。内存使用也没有明显的下降。IE浏览器在内存占用达到400M左右就变得非常卡。分析发现是iframe没有释放造成的，于是对全部已关闭的iframe所占用的内存进行释放，尽管不能全然释放。可是iframe内存占用量不会一直增长，整个应用内存使用量控制在150M左右
动态创建IFRAME加载方法和内存释放
kmblack1的专栏
04-23 1万+
1.document.createElement("IFRAME")后不要设置src属性,应先注册IFRAME的onload事件,然后把IFRAME添加到容器中 2.设置计数器变量,默认值为0,在onload方法中检查计数器是否为0,如果为0则设置src属性(会再次触发IFRAME onload事件),然后计数加1 3.在IFRAME onload事件中判断计数后检查IFRAME src是否为
关于 JS动态生成的 iframe 引入CSS 的踩坑
m0_61486963的博客
07-31 3272
关于 JS动态生成的 iframe 引入CSS 的踩坑
iframe传值 和关闭
最新发布
03-20
### iframe 传值方法及关闭操作 #### 一、iframe 的基本结构与功能 HTML 中的 `<iframe>` 元素用于嵌入另一个 HTML 页面到当前页面中。通过 `v-if` 和动态绑定属性（如 Vue.js 提供的功能），可以实现条件渲染和动态加载 iframe[^1]。 ```html <div v-if="src" class="iframe"> <iframe ref="iframe" id="iframe" width="100%" height="600" loading="lazy" :src="src" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" @load="loaded" ></iframe> </div> ``` 上述代码展示了如何基于 Vue.js 动态控制 iframe 是否显示及其源地址。 --- #### 二、子 iframe 向父页面传递数据的方式 ##### 方法 1：利用全局变量或 DOM 节点 父页面可以通过设置一个隐藏输入框来接收来自子 iframe 的数据。例如： ```html <input id="handle_status" value="" hidden="hidden"> ``` 子 iframe 可以通过 JavaScript 修改该隐藏字段的内容，从而完成数据传递[^3]。 ```javascript // 子 iframe 中执行以下代码向父页面传值 parent.document.getElementById('handle_status').value = 'some_value'; ``` --- ##### 方法 2：使用 `postMessage` API 进行跨域通信 如果父子页面位于不同的域名下，则需要借助浏览器提供的 `window.postMessage()` 方法来进行安全的数据交换[^4]。 **子 iframe 发送消息给父页面** ```javascript const dataToParent = { key: 'value' }; window.parent.postMessage(dataToParent, '*'); // '*' 表示允许任何目标窗口接收到消息 ``` **父页面监听并处理消息** ```javascript window.addEventListener('message', function(event) { const receivedData = event.data; console.log(receivedData); }); ``` 此方式不仅支持同域环境下的交互，还适用于跨域场景中的数据传输。 --- #### 三、关闭 iframe 的方法 ##### 方法 1：移除 iframe 容器节点 可以直接删除包含 iframe 的容器元素，达到关闭的效果。 ```javascript document.querySelector('.iframe').remove(); ``` 这种方法简单粗暴，适合不需要保留状态的情况。 --- ##### 方法 2：调用 layer 插件的相关函数 当使用 Layui 框架时，可通过其内置工具管理弹窗型 iframe。具体做法如下： ```javascript var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层索引 parent.layer.close(index); // 关闭指定层 ``` 这段脚本实现了优雅地销毁特定 iframe 实例的操作。 --- #### 四、总结 综上所述，在实际开发过程中可以根据项目需求选用合适的方案实施 iframe 数据交流以及退出机制设计。无论是采用基础 DOM 操作还是现代化框架辅助手段都能有效达成目的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值