js控制网页在特定iframe中打开程序代码
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来介绍一个不错的js控制网页在特定iframe中打开程序代码，有需要了解的同学不防进入参考。...
|
我们在编写系统管理后台时，很多时候会使用到iframe进行管理，但是有有个问题就是有些时候比较聪明的用户会绕过我们的iframe的父页面，而直接打开了iframe中src的内容，如果这样，重则给我们的系统带来破坏，轻则使我们系统的有些功能不能正常使用，今天用js写了一个控制脚本，可以让用户无法绕开iframe的父页而直接打开子页的内容进行浏览，主要通过在iframe在子父页面各加一段js脚本实现控制
javascript实现刷新iframe的方法的总结，现在假设存在下面这样一个iframe，则刷新该iframe的N种方法有：
| 代码如下 |
复制代码 |
|
<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe>
|
第一种方法:用iframe的name属性定位
| 代码如下 |
复制代码 |
|
<input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()">
或者
<input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()">
|
实例
父页面
| 代码如下 |
复制代码 |
|
function check_iframe() {
var url = location.search;//包括？的参数
if (url.indexOf("?")!=-1) {
var str = url.substr(1); //传输过来的url
document.getElementById("main").src = decodeURI(str);
}
}
|
说明：1、要使用onload或者类此这个事件加载该函数
2、main表示父页面中要显示子页面的iframe的id
3、传过来的url是通过get方式，使用encodeURI编码的
子页面
| 代码如下 |
复制代码 |
|
function check_page() {
var iframe_url = document.referrer.toLowerCase();
if (iframe_url == "") {
document.location.href = "default.aspx?" + encodeURI(document.location.href);
}
//防止在子页面中点击本页面自身超链时再次打开一个iframe
else if (iframe_url.indexOf("default.aspx") == -1 && document.location.href.toLowerCase().indexOf(iframe_url) == -1)
{ document.location.href = "default.aspx?" + encodeURI(document.location.href); }
}
|
说明：1、要使用onload或者类此这个事件加载该函数
2、supadmin.html表示是含有该页面显示的iframe的父页面
3、使用encodeURI对子页面的url进行了编码，使用get方式传送给父页面
frameset中打开自己窗口也一样
(1)包含框架页的代码。
| 代码如下 |
复制代码 |
|
<frameset cols="100,*" name="frame1">
<frame src="1.htm" name="top">
<frame src="2.htm" name="main">
</frameset>
|
(2)框架加载页(1.htm或2.htm)的链接代码：
| 代码如下 |
复制代码 |
|
<a href="http://www.111cn.net" target="top">在上框中打开链接</a>
<a href="http://www.111cn.net" target="main">在主框中打开链接</a>
|
现在讲一下iframe下JS跨域
浏览器虽然会禁止js跨域访问页面中的对象，但对于iframe的层级关系引用并没有做限制，即parent仍然可用；该方案就是利用了2层内嵌 iframe、使用第二级iframe中的页面与parent.parent的页面是同域名的关系，从而避免跨域问题实现两个页面间相关数据的传递，本质上就是利用parent.parent实现对父父页面中js的回调！
具体操作流程：
1、A.com的index.htm页面包含一个iframe，src指向 B.com 下的sub-index.html
2、B.com 域名下的 sub-index.htm页面中再内嵌一个隐藏的iframe，iframe的src指向 A.com 域名下的页面pass.html?p=xx， pass.html页面只是用来传递sub-index.htm页面加载完之后需要传递的参数，pass.html页面里js拿到获得p参数的值后直接调用 parent.parent.document.getElementById("content").value=p; 完成对父页面dom值的设置； |
