动态加载iframe和关闭

 

 

<!-- 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;

}

 

 

### 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、付费专栏及课程。

余额充值