用JS获取iframe提交后的数据

做一个发布新闻的模板的模板,里面包括新闻标题,作者,发布时间,相册,内容几个部分,因为本身不是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了。