2 u011218527 u011218527 于 2016.01.31 20:56 提问

怎样实现点击iframe导入页面中的按钮关闭这个iframe?

我现在有个页面A,里面有个iframe(假设id为main)。这个iframe导入的页面B里面有个按钮(假设id为btn)。我想要点击这个按钮,关闭整个iframe。
请问怎样才能实现??

我也搜过一些答案。比如在B的js文件里为btn添加click事件函数:
document.getElementById("btn").onclick=function(){
window.parent.document.getElementById("main").style.display="none";
}

我试过了,然而这种方法并不能隐藏iframe。跪求大神们指点~~~谢谢

6个回答

showbo
showbo   Ds   Rxr 2016.02.01 09:25

代码绝对没有问题,前提是不能跨域并且代码要放到按钮后面,要不找不到对象。没有发布网站通过http访问时,不要使用webkit核心浏览器(如chrome,360急速),无法相互访问

 document.getElementById("btn").onclick=function(){
 alert(11)
window.parent.document.getElementById("main").style.display="none";
}
u011218527
u011218527 回复无聊码农: 恩恩,好的,多谢!我研究研究~
2 年多之前 回复
showbo
showbo 回复阿琛Bonnie: 这个是安全限制问题,你要调试自己增加启动参数。http://www.w3dev.cn/article/20141031/file-protocol-config-chrome-support-ajax-request.aspx
2 年多之前 回复
u011218527
u011218527 能否再请教下,为什么没有发布的话就不能互相访问呢?谢谢!
2 年多之前 回复
u011218527
u011218527 能否再请教下,为什么没有发布的话就不能互相访问呢?谢谢!
2 年多之前 回复
u011218527
u011218527 谢谢谢谢!果然是没有发布的问题。不过发现还确实是像二楼说的那样还要在iframe外面加上div才行…………加上没发布时,试了各种浏览器都不行……发布了再用Chrome访问就可以了
2 年多之前 回复
u011218527
u011218527 谢谢谢谢!果然是没有发布的问题。不过发现还确实是像二楼说的那样还要在iframe外面加上div才行…………加上没发布时,试了各种浏览器都不行……发布了再用Chrome访问就可以了
2 年多之前 回复
devmiao
devmiao   Ds   Rxr 2016.01.31 22:39
sinat_26745925
sinat_26745925   2016.01.31 21:44

图片说明

u011218527
u011218527 谢谢!确实要加个div才行~不过还得是通过发布了的网站访问,不然在本地的话还是不行。。。你和六楼的答案结合起来我的问题就解决啦
2 年多之前 回复
sinat_26745925
sinat_26745925   2016.01.31 21:43

在 iframe外面加一个div,btn的事件来改变这个div的隐藏。


                    document.getElementById("btn").onclick=function(){

window.parent.document.getElementById("changeDiv").style.display="none";
}

july_apple
july_apple   2016.01.31 22:12

我在IE下试过了,是可以的。

july_apple
july_apple   2016.01.31 22:16

在父页面写函数,然后在子页面调用也是可以的。

u011218527
u011218527 谢谢你……不过我试了下,单纯这样感觉还是不行……我最后发现有两个问题:第一要在iframe外侧加个div,需要隐藏的是这个div;第二是得发布了网站才有用,直接在本地是无法隐藏的……
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
点击按钮加载iframe再次点击关闭iframe
最初是因为网站里头要嵌入商务通对话窗口 但是如果一开始frame就是打开的,会导致只要有访客进来,就会打开一个对话,导致客服要处理太多对话了。 所以处理方法是打开的时候只有点击按钮才将frame的内容加载进来append,关闭的时候将frame这个div的内容remove掉 而通过改变frame src的方法是不行的,离开的时候置空会有个提示是否离开的提示框,与实际情况不符合
# 点击左边按钮,页面出现在右边(iframe标签) #
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctr
调用iframe中的按钮点击
index.html<html> <head><meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> function callChild(){ //myFrame.window.say(); myFra
jsp页面点击弹出iframe弹框,并传值到后台
首先在jsp页面按钮绑定一个函数如下:  function openwindow(id,endDate){                     layer.open({                         type: 2,                         title: false,                         closeBtn: 0
C#点击iframe页面的控件(button),弹出层,关闭弹出层时只刷新父页面中的iframe里面的页面
1.父页面Default.aspx 中的前端代码                       style="height:880px; width: 100%; "> 2.iframe页面的弹出层页面关闭时刷新iframe页面  string script="alert('提示信息');window.parent.window.parent.closeWindown();win
关于点击按钮弹出iframe窗口的前端代码
工作中web前端碰到一些弹出窗口问题:利用iframe解决,优化代码的视觉效果
点击按钮button触发修改div的iframe内容 (修改iframe的src内容)
点击按钮button触发修改div的iframe内容 (修改iframe的src内容) 新建一个html文件,比如test.html,之后将如下内容复制进文件,然后用浏览器打开该html文件即可
Extjs window嵌套iframe页面中关闭window
var windowElement = parent.Ext.fly(window.frameElement).up('div.x-window'); parent.Ext.getCmp(windowElement.id).close();
extjs使用 iframe嵌入框,点击事件弹出窗口显示
extjs使用 iframe嵌入框,点击事件弹出窗口显示
iframe异步加载(点击左边菜单加载右边内容)
关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面。 话不多说,做了一个实例大致是这样的: 1、首先在你的项目中建立三个文件如: 2、在Default页面引入jquery文件并在body中加入也下代码: View Code 1 "width: 20%; float: lef