动态加载iframe和关闭

最新推荐文章于 2024-02-29 14:27:44 发布
最新推荐文章于 2024-02-29 14:27:44 发布
阅读量6.6k 收藏
点赞数
分类专栏： 前端 文章标签： iframe stylesheet javascript class internet basic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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;

}

 

 

applicationresource
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态设置iframe并实现页面加载
爱米酱的博客
05-03 5991
//如果没有这个设置，只改变src的值则不会加载页面内容 document.getElementById("id").contentWindow.location.reload(true); document.getElementById("id").src = '地址';
iframe的使用动态添加
wangyingying12的博客
04-17 5495
window.postMessage() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。在iframe的子页面中需要发出事件，让父页面销毁。在引入iframe的index.html页面。
iframe页面中用window.close怎样才能关闭父窗口(iframe外的窗口)
terran_li2005的博客
09-24 1298
  以下内容转自：http://topic.csdn.net/t/20050415/14/3939450.html     top.opener=null;   top.close();     //注意,   不可跨域
iframe（内联框架）
最新发布
t1621353644的博客
02-29 374
iframe（内联框架）是 HTML 中的一个元素，它允许你嵌套一个 HTML 文档到另一个 HTML 文档中。以下是一些关于iframe。
AdminLte3改造为：单iframe，多级动态json菜单
qq_24915489的博客
12-13 2618
一、下载代码 https://gitee.com/zhou-kang/admin-lte3-i-frame-json_menus 二、运行index.html 三、核心文件menu.js menu.js中定义了json格式的菜单，并将json转为adminLte的菜单html，可根据需要改在为动态菜单。 pages/test/leaf*.html，是iframe的测试页面，其它文件均是AdminLte3 的原始文件。 核心为menu.js文件，必须在jquery引入后使用 iframe的
layer.close()关闭进度条和Iframe窗的方法
12-12
//加载的风格，支持0-2 layer.close(index);//关闭进度条 self.close = function () { //关闭自身 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index...
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
10-16
通过以上方法，开发者能够灵活地控制和管理Layer组件中的多个iframe弹出层，实现复杂的应用场景，如页面间的交互、数据传递和状态管理。在实际项目中，根据具体需求选择合适的方法进行组合使用，可以大大提升用户...
js实现iframe自动自适应高度的方法
10-24
Iframe的`height`属性决定了其显示区域的高度，当我们想要Iframe内容自适应时，我们需要动态地修改这个属性值，使其等于Iframe内部页面的滚动高度（scrollHeight）。 下面是一个简单的JavaScript函数，用于自动调整...
IE浏览器IFrame对象内存不释放问题解决方法
09-04
随着弹出和关闭的重复进行，IE浏览器的内存占用量会显著增加，可能导致浏览器出现错误，无法正常关闭，只能通过结束进程的方式来重启。这个问题在IE8中尤为明显，因为`showModalDialog`弹出的窗口与父窗口共用同一个...
jquery iframe动态添加删除tab选项卡
06-14
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡
关于大量iframe加载的解决方案
热门推荐
中华胡杨的专栏
11-13 1万+
手头的一个项目，根据客户的要求，在前端自动生成大量的iframe，比如90个iframe，而且这些iframe是嵌套在一个大的iframe下的，不要问我为什么这样。方案1：将动态生成的url，附加到iframe的src中，比如后端生成了90个iframe，那么将这些数据返回到浏览器，然后让浏览器自动去请求。这个时候的现象是：浏览器直接假死，就是任何操作都已经做不了了。猜想原因是：当文档加载完成时，将
如何关闭iframe，打开新页面
weixin_45932157的博客
12-18 1107
问题： parent.location.reload(); location.replace("/login/index"); 加上后：
Asp.net中使用iframe动态加载页面
胡雪松的专栏
05-06 3747
step1：添加下列代码到ASPX页面: <IFRAME id="frame1" src="SourcePage.extension / URL of the external Site" scrolling="auto" runat=server> step2：      此时aspx.cs中会有：          protected System.Web.UI.Htm
正确释放iframe的方法
JUST DO IT.
04-24 4226
var panel=mainForm.tabPanel.add({             region : 'center',             title : 'xxxxxx',             margins : '0 3 3 0',             id : id,             align : 'center',             htm
iframe点击关闭按钮
07-20
要在 iframe 中添加一个关闭按钮，并在点击关闭按钮时关闭 iframe，您可以按照以下步骤进行操作： 1. 在包含 iframe 的父页面中，添加一个按钮元素，用于关闭 iframe。例如： ```html <button id="closeButton">关闭</button> ``` 2. 在父页面的脚本中，获取到关闭按钮的引用，并添加一个点击事件监听器。在点击事件处理程序中，使用 `contentWindow` 属性来访问 iframe 的 `window` 对象，并调用其 `close()` 方法来关闭 iframe。例如： ```javascript var closeButton = document.getElementById('closeButton'); var iframe = document.getElementById('your-iframe-id'); closeButton.addEventListener('click', function() { iframe.contentWindow.close(); // 关闭 iframe }); ``` 确保将 `'your-iframe-id'` 替换为您实际的 iframe 元素的 ID。 请注意，上述代码假设您的 iframe 是在同一个域名下加载的，以避免跨域安全问题。如果 iframe 是在不同的域名下加载的，则需要确保在父页面和 iframe 页面之间进行正确的跨域通信设置，以允许关闭操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值