`
xiaoyezi1128
  • 浏览: 129070 次
  • 性别: Icon_minigender_2
  • 来自: 天津
社区版块
存档分类
最新评论

iframe内的button关闭包裹iframe的div

阅读更多

重点是这句话window.parent.closeIframe();

因为iframe和它的父页面谁也不知道谁。不能直接找到他的父页面的div,所以用window.parent找到iframe的父页面,然后在用父页面上的js 来关闭包裹iframe的div

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(function(){
            $(".close").click(function(){
                alert("本页上的close");           
                $("#win2").hide();          
            })
        })
       
    function closeIframe(){
        alert("iframe里的close调用本函数");
        $("#win2").hide();
        }
</script>
</head>

<body>
<div id="win2" style=" width:300px; height:200px; border:1px solid red;">
    <iframe style="height:182px; width:300px;" src="1.html"></iframe>
    <a class="close">关闭本页div</a>
</div>
</body>
</html>

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
    function closeParent(){
            window.parent.closeIframe();58
        }
</script>
</head>

<body>
    nihao
    <a class="close" onclick="closeParent    ()">关系iframe外层的div</a>
</body>
</html>

分享到:
评论
3 楼 kunsyliu 2013-08-01  
                                         

成功隐藏掉div
2 楼 ksgameboy 2012-03-06  
无法实现跨域调用,假设iframe的src="http://www.xxx.com/1.html"的话
1 楼 bluelamb 2010-12-10  
呵呵,厉害厉害,这都让你知道了
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    div嵌套html不用iframe

    最近在做作业中需要在不用iframe的情况下嵌套页面,所以只好在div中嵌套,用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....

    右下角弹出窗口 javascript

    部分代码如下: ...&lt;body&gt;&lt;div id="rbbox"&gt;&lt;a class="button" onclick="closeBox()"&gt;关闭&lt;/a&gt;&lt;iframe src="1.jpg" height="200" width="300" scrolling="no" &gt;&lt;/iframe&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ...

    ymPrompt 重新封装了alert

    &lt;input type="button" value="普通弹出窗口" onclick="ymPrompt.win('&lt;div class=\'myContent\'&gt;普通弹出窗口&lt;/div&gt;',300,200,'普通弹窗测试')" /&gt; 示例: 源码: &lt;input type="button" value="iframe弹出窗口" ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...

    网易编辑器用法演示===编辑器

    网易编辑器用法演示 ; charset=gb2312" /&gt; 网易编辑器用法演示 body{font-size:12px;color:#333333;...&lt;input type="button" value="查看隐藏表单的内容" onClick="alert(content.value);"&gt; &lt;/html&gt;

    登录页面源码

    好玩的登录页面&lt;!...&lt;!...documentation"&gt;...login"&gt;&lt;div class="hand"&gt;&lt;/div&gt;&lt;div class="hand hand-r"&gt;&lt;/div&gt;&lt;div class="arms"&gt;&lt;div class="arm"&gt;&lt;/div&gt;&lt;div class="arm arm-r"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="pad"&gt;...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...

    index.html

    &lt;!...&lt;... &lt;head&gt; &lt;meta charset="utf-8"&gt;...link href ="gogo.css" type="text/css" rel =... &lt;button&gt;&lt;a href="index.html"&gt;Again&lt;/a&gt;&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

    js使用小技巧

    &lt;input type=button value=整理收藏夹 onclick="window.external.ShowBrowserUI("OrganizeFavorites", null)"&gt; &lt;input type=button value=语言设置 onclick="window.external.ShowBrowserUI("LanguageDialog", null...

    京东首页静态模板

    &lt;!...&lt;... ... &lt;div data-type="bar" clstag="h|keycount|cebianlan_h_jimi|btn" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-jimi" data-name="jimi" data-login="true" data-iframe="//jimi.jd....

    js常见表单应用技巧

    显示框架内的指定位置 &lt;div u00a0style=’width:300px;height:300px;’&gt;&lt;iframe src=’http://163.com’ style=’margin:-100px;width:100%;height:100%’&gt;&lt;/iframe&gt;&lt;/div&gt; 改变文本框的属性(确定...

    ajax后退解决方案

    一、使用iframe,通过[removed]产生历史 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=”utf-8″/&gt; &lt;title&gt;0&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=”...

    HTML 网页设计

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav...

    搜索引擎名次查询.net版源码下载

    &lt;input name="cmdHelp" type="button" value="使用帮助" id="butn" onclick="alert('输入你的网址,例:www.iwbuy.com,输入关键词,例:无为搜索,选择查询页数,选择要查询的搜索引擎\n因为信息量太大等原因,目前只...

    超漂亮的仿腾讯弹出层效果(兼容主流浏览器)

    body,div,q,iframe,form,h5{ margin: 0; padding: 0;} img,fieldset { border: none 0; } body,td,textarea { word-break: break-all; word-wrap: break-word; line-height:1.5;} body,input,textarea,select,button...

    AjaxUpLoad.js实现文件上传功能

    &lt;div class=uploadFile&gt; &lt;span id=doc&gt;&lt;input type=text disabled=disabled /&gt; &lt;input type=hidden id=hidFileName /&gt; &lt;input type=button id=btnUploadFile value=上传 /&gt; &lt;input type=...

    html入门到放弃笔记

    作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一行显示的,称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用:布局 注意: 1、p标记不能嵌套其它的块级元素 2、行内元素中 最好 不要嵌套...

    jQuery插件ajaxfileupload.js实现上传文件

    &lt;div class=uploadFile&gt; &lt;span id=doc&gt;&lt;input type=text disabled=disabled /&gt; &lt;input type=hidden id=hidFileName /&gt; &lt;input type=button id=btnUploadFile value=上传 /&gt; &lt;input type=...

    程序员面试刷题的书哪个好-Front-end-basics:前端基础

    可变元素(根据上下文语境决定该元素为块元素或者内联元素):button、iframe、script、del等 块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排...

    从入门到精通HTML5——PDF——网盘链接

     7.3.4 表格内文字与边框的间距  ——cellpadding 131  7.4 设置表格背景 132  7.4.1 表格的背景颜色——bgcolor 132  7.4.2 表格的背景图像——background 133  7.5 设置表格的行属性 134  7.5.1 高度...

Global site tag (gtag.js) - Google Analytics