Keep on going, never give up.

框架应用:frame、iframe跨域传递或修改数据方法

本文汇总网页框架frameset、frame、iframe跨域提交或修改数据方法,一般多在网站后台或内嵌广告设计时需用到,现在前台展示页似乎很少见到使用框架的,天缘也只是使用了其中第一种方法,网页编程对天缘纯粹兴趣爱好,也是临时用到总结一下,可能不一定全面,如果大家有更好的方法,欢迎留言补充。

本文示例基础,使用frameset、frame分割窗体,下面代码是典型的网站后台模式,顶部为bannner栏,下面左右分割两部分,当然也可以使用Javascript结合table标签等实现同样功能。

<frameset>
    <frame name="banner" src="banner.php">
    <frameset cols="150,*">
        <frame name="left" target="right" src="left.php">
        <frame name="right" src="right.php">
    </frameset>
    <noframes>
    <body>
    <p>不支持框架</p>
    </body>
    </noframes>
</frameset>

一、为FRAME跨域赋值

通过top并使用getElementsByTagName实现跨FRAME提交数据,方法如下:

比如right.php内容如下,通过Javascript修改banner文档中的值。

<script type="text/javascript">
try{window.top.banner.document.getElementsByTagName('div')[0].innerHTML='我是标题';}
catch(e){}
</script>

二、跨域修改表单等元素

可以使用类似这样的JS脚本:

var obj=parent.otherFrameName.document.forms[0].xxx;

来获取表单控件对象,然后进行赋值即可。


三、通过GET方法跨FRAME提交数据

修改frame的src属性,然后把需要传递的值通过GET方法传递。不过要求数据接收方添加相应的接收处理脚本。通过GET方法一般可以实现一些简单的数据传递,如果要实现动态跨FRAME修改页面元素还是有些复杂,不如上面的方法要简单点。

<script type="text/javascript">
try{window.top.banner.src='banner.php?title=我才是标题';}
catch(e){}
</script>

四、使用cookie或SESSION跨域传递数据

通过A域设置COOKIE值或SESSION值,然后动态通过JS脚本跨域刷新页面,再次读取COOKIE或SESSION,来达到传递数据目的,不过如果frame源地址是第三方地址,使用COOKIE,可能会因为浏览器的阻止导致失效。似乎还可以通过发送设置P3P头达到规避效果,不过暂时没有验证过。

五、内嵌框架iframe的数据传递

iframe传递数据相对要简单一些,毕竟还都在同一个文档中,直接使用parent来获取父容器,代码如下。

<div id="abc">
<div id="Content">http://www.metsky.com</div>
<iframe id="iframe1" src="test.html" ></iframe>
</div>
//test.html
<script type="text/javascript">
function change(){
parent.document.getElementById("Content").innerHTML = "天缘博客";
}
</script>
<input type="button" id="buttion1" onclick="change();">

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.