Skip to content
久久日记本
曾经年少爱追梦,一心只想往前飞
  • 首页
  • 博客
    • 博客历史
    • 主题
    • 个人文集
  • 关于
    • 正在读的书
    • 作品归档
    • 2018作品归档
    • 联系我
  • 友情链接
  • 留言板
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
Front-End

用JS获取iframe提交后的数据

Posted on 2013年6月9日 by 九九 / 2608 Views

做一个发布新闻的模板的模板,里面包括 新闻标题,作者,发布时间,相册,内容几个部分,因为本身不是ASP.NET而是用的ASP,不清楚上传控件能否像ASP.NET那么方便,所以用了”无组件上传”.

在发布页面布置了相关标签,上传部分用iframe引用”无组件上传”页面:

效果图:

上传成功后,没法将上传之后的图片所在服务器的地址,传出iframe到当前 父页面,这样,就没法保存到数据库了.网上查了不少资料,也在博客上和论坛上相继问过,可能是表述不好吧,没有得到好的答案,基本都是推荐我使用Ajax,但是再深入问点就都说不清楚了.Ajax学的实在不行.

先分析一下问题:

在主页面的 iframe的 页中,点击 浏览 要上传的图片,上传之后

<!--a.asp 相册 td 部分 引用 上传页面upload.asp-->
<td>
     <!--pic 保存传出的图片链接-->
     <input name="pic" type="text" id="pic" /> 
     <!--引用的上传页面upload.asp-->
     <iframe src="upload.asp" id="myframe" name="myframe">
     </iframe>
</td>

进入上传成功页面,

<!--上面省略无组件上传的代码-->
......
<!--在upload.asp点击上传,上传成功后由upload.asp页面进入 finish.asp页面(可以参考无组件上传),当然,这些都是 在iframe 中出现的相关页面跳转-->
<!--这是finish.asp页面-->
<form>
<!--photourl 保存上传成功的图片链接-->
    <input type="text" id="photourl" name="photourl" value="<%="uppicdata\"&filename%>" >
    <span style="font-color:red">上传成功!<span>
</form>

其中,

主页面放入text文本,保存 从 iframe 传出的链接地址;

iframe页面在提示上传成功的页面同样放上 text,保存上传成功的图片链接地址;

这个问题就成了, 读取 iframe页面中的text文本,将其赋值给主页面的文本.

用JS实现如下:

/*点击btnSub按钮 从 iframe 拷贝 图片链接地址photourl到 主页面pic*/
$(document).ready(function(){
    $("#btnSub").click(function(){
        var p= document.getElementById("myframe").contentWindow.document.getElementById("photourl");    
/*如果iframe 中上传没有点击,就没有跳转到 finish.asp页面,这样不存在photourl,自然会为null*/
        if(p!=null){
            var picurl=p.value;/*上传的新路径*/
            var newurl=document.getElementById("pic");
            newurl.value=picurl;
        }
    });
});

关键代码:

document.getElementById('iframe的id').contentWindow.document.getElementById('需要获取的标签的id')

此方法只能获取iframe里面的元素,不能调用子窗体或父窗体的函数

拓展:

如果需要调用函数:需使用

JS父窗体调用子窗体方法

window.frames["edthtml"].window.getHtmlValue()

JS子窗体调用父窗体方法

window.parent.submitdata(html);

然后在修饰一下原界面,可以把text文本改为hidden,这样就隐藏了让用户看不到.

效果图:

上传图片之后的效果图:

这样,在页面提交时再调用上面 JS代码, 把iframe 中的提交生成后的链接读出来 并赋值给主界面的文本框(这里已经变成hidden了),提交数据保存图片链接就。

拓展阅读: 传送门

iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到

1)通过iframe加载的,在iframe中用parent对象得到父页window作用域,如果iframe中又加载了iframe,在最里层的iframe中需要重复调用parent.parent得到其上一级iframe的引用。如果是直接引用最顶级的父页作用域,可以使用top对象。

2)父页使用document.getElementById(“iframe的id”).contentWindow得到iframe的window作用域,如果iframe还继续嵌套了iframe,则还需要继续执行.getElementById(“iframe的id”).contentWindow操作才能得到内层iframe的作用域。如

var ifrWin=document.getElementById("iframe的id").contentWindow.getElementById("再次被嵌套的iframe的id").contentWindow;

3)aaa.html中使用 var win=window.open(“xxx.html”),win就是xxx.html的window作用域,xxx.html中使用opener对象得到打开这个页面的window作用域。如果xxx.html又打开了bbb.html,那么bbb.html中使用opener.opener得到aaa.html作用域,aaa.html要想得到bbb.html作用域,那么xxx.html需要保存打开bbb.html的作用域如var win=window.open(“bbb.html”),那么aaa.html通过win.win就得到bbb.html的作用域了

通过上面的介绍知道了关系之后,就很容易从一个页面更新到其他通过window.open或者iframe嵌套的子页面或者父页面了。

备注:chrome浏览器下本地测试iframe不能互访, chrome浏览器iframe parent.document为undefined

测试脚本的时候发现,在谷歌chrome浏览器下面,iframe中获取父页的document时竟然为undefined,google chrome神奇了,其他浏览器如ie,firefox没出现这种问题。

iframe要获取到父页的document对象,需要通过服务器,就是http协议访问时才能获取到,要不直接双击运行【chrome为默认浏览器】或者直接拖进chrome浏览器查看时,iframe使用parent.document得到的是undefined。

测试代码如下

test.html

<html>
   <head></head>
   <body><input type="text" id="txt" />
   <br />
   <iframe src="ifr.html"></iframe></body>
</html>

ifr.html

<input type="button" onclick="setValue()" value="设置父页输入框内容" />
<script>
    function setValue() {
        alert(parent.document)//非http协议访问输出undefined,http协议访问时输出[object HTMLDocument]
        var ipt = parent.document.getElementById('txt');//本地浏览由于parent.document为undefined,所以当然无法使用getElementById方法了
        ipt.value = new Date().toLocaleString();
    }
</script>

update:2014-06-23

给mu93问题解答:

请教一下。我做的这个ASP程序和您的想法一样,也是想要上传图片后,保存路径到数据库按 了您博文中的方法,提交后,就是不能获到iframe的数据。求指教。谢谢

回复

请仔细看博客中的拓展阅读,
iframe里面的那个上传功能起码要能正常运行啊,改造一下,让那个上传功能能返回上传成功的路径,路径可以放在一个lable里面,这个实现不了那就是你的无组件上传有问题了。这个解决出来的就好了,提交时候用我那个拓展阅读里面的方法,读取iframe里面的lable的文字,不就ok了。

CSS, Div, JS
九九
过去的我们,现在的自己,往事,终会随风而逝。 View all posts by 九九 →

Post navigation

Older post
Linq常用语法和Lambda表达式总结
Newer post
HTTP无法注册URL进程不具有此命名空间的访问权限

标签云

2019ncov Android ASP.NET Baby C# C/C++ CSS Div DX11 flask front-end GAE Git Java JJProject JS Life MSSQL MVC OpenSource Oracle Python React React-Native Software Tools Vue Webpack Website Window WP7 乱记 十年旧梦 天气 宝宝成长日记 小说 工作 情感 故障 散文 日记 网新实训笔记 花落梧桐 诗间集 转载

时光机

  • 2023年3月
  • 2023年2月
  • 2022年12月
  • 2022年4月
  • 2022年3月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年5月
  • 2019年12月
  • 2019年10月
  • 2019年9月
  • 2019年6月
  • 2019年5月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年7月
  • 2017年3月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年1月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年6月
  • 2010年5月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年3月
  • 2009年2月
  • 2009年1月
  • 2008年8月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年2月
  • 2007年11月
  • 2007年8月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年10月
  • 2006年8月
© 2006 - 2023 久久日记本
Powered by WordPress | Theme: Graphy for 99diary