js控制网页在特定iframe中打开程序代码-android100学习网
js控制网页在特定iframe中打开程序代码
本文章来介绍一个不错的js控制网页在特定iframe中打开程序代码，有需要了解的同学不防进入参考。我们在编写系统管理后台时，很多时候会使用到iframe进行管理，但是有有个问题就是有些时候比...
本文章来介绍一个不错的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.//包括？的参数
&&&&&&&&&&& 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值的设置；& & & & 一、需求与遇到的问题& & 在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。& & 我的思路是：在顶部……
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
论文写作技巧
上一篇：下一篇：
相关经验教程iframe嵌套frameset，实现整个iframe框架出现滚动条，怎么样随页面内容的高度全部展示出来？
我做的网站，是用frameset框架布局，分上中下，上面和下面框架部分的内容是固定的，中间框架内容是不同的，我想让整个框架共用一个滚动条，就用iframe嵌套frameset框架，我在iframe中设置了高度，页面内容不一样，高度也不一样了，有什么办法能让页面的内容全部展示出来？纠结两天了，很急
14:04&&&[]
我主要目的是为了让整个frameset框架出现滚动条，而不是里面的小模块出现滚动条。在网上找了些资料，好像用iframe能实现，但是，我用iframe嵌套了frameset，还是没能实现我要的功能。请各位大侠帮帮忙。最好贴上完整的代码，谢谢了，在线等！我的代码如下：
这是aa.html
22:40&&&[]
用iframe嵌套frameset框架，框架分上中下三部分，鼠标在页面内滚动，但是页面内容不随鼠标移动而移动,怎么让页面内容和滚动条随鼠标移动而移动?
回复讨论(解决方案)
在body里面加一句
onmousewheel=&quot
21:22&&&[]
本帖最后由 lys 于
12:26:40 编辑
我在iframe中嵌套了一个框架集，但是发现当鼠标在页面的iframe上时，鼠标滚轮是不起作用的，我的原来想法是整个浏览器窗口随鼠标滚动滚动，网上看到一个帖子说用&&body&nbsp
21:12&&&[]
我用iframe嵌套frameset框架，合成一个滚动条，但是鼠标再页面内滚动，怎么让滚动条跟随鼠标移动而移动呢？在线等，请各位大侠帮帮忙！
回复讨论(解决方案)
通过onmousewheel&事件，把里面页面的scrollTop赋值给外面的
怎么赋值啊？能给我个例子吗
21:12&&&[]
;&style=&width:960border-width:&0&&&
&&&&&&&&/iframe&
我怎么样才能让Right.aspx这个
-19:50&&&[]
).contentWindow.document.body.scrollH
在父页面中更改 Iframe 的高度，使 Iframe 没有滚动条 $(&#test_frame&).attr(&height&,h+100);
例子： 父页面： &!DOCTYPE html PUBLIC
19:11&&&[]
就是拖动滚动条，获得左边的距离
&&&&$(&#ss&).html($(frameWidow).scrollLeft());
太谢谢你了
20:45&&&[]
在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理
10:02&&&[]
;&&jQuery(&#Left&).contents().find(&.menu&).height(jQuery(window).height()&-&50&-&68);
&&&&&&&&&&&&jQuery(&#Right&).height(jQuery(window).height()&-&50);
&&&&&&&&&&&&jQuery(&#Right&).contents().find(&.list&).height(jQuery(window).height()&-&50&-&_content_height);
&&&&&&&&&&&&_content_width&=&jQuery(window).width()&-&_menu_
&&&&&&&&&&&&if&(_content_resize&!=&null)&{
&&&&&&&&&&&&&&&& _content_resize();
&&&&&&&&&&&&}
&&&&&&&&});
&&&&&&&&jQuery(&#Left&).load(function&()&{
&&&&&&&&&&&&jQuery(&#Left&).height(jQuery(window).height()&-&50);
&&&&&&&&&&&&jQuery(&#Left&).contents().find(&.menu&).height(jQuery(window).height()&-&50&-&68);
&&&&&&&&});
&&&&&&&&jQuery(&#Right&).load(function&()&{
&&&&&&&&&&&&jQuery(&#Right&).height(jQuery(window).height()&-&50);
&&&&&&&&&&&&jQuery(&#Right&).contents().find(&.list&).height(jQuery(window).height()&-&50&-&_content_height);
&&&&&&&&});
body,&html&{
&&&& parent._content_height&=&66;//根据子页的情况给于父页预留高度
&&&&//实现父页面的自适应方法,没有设置为null
&&&&& parent._content_resize&=&function&()&{
&&&&&&&&&&var&_tw&=&0;
&&&&&&&&&&jQuery(&.datalist&.title&li&).each(function&(i,&item)&{
&&&&&&&&&&&&&&_tw&=&_tw&+&jQuery(item).width();
&&&&&&&&&&});
&&&&&&&&&&jQuery(&.datalist&.title&li&).each(function&(i,&item)&{
&&&&&&&&&&&&&&var&c&=&jQuery(item).attr(&class&);
&&&&&&&&&&&&&&var&w&=&(jQuery(item).width()&/&_tw)&*&parent._content_
&&&&&&&&&&&&&&jQuery(&.&&+&c).width(w);
&&&&&&&&&&});
&&&&&jQuery(document).ready(function&()&{
&&&&&&&&&&parent._content_resize();
&%@&Page&Language=&C#&&AutoEventWireup=&true&&Inherits=&Admin_Default&&CodeFile=&Default.aspx.cs&&%& &!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html&xmlns=&http://www.w3.org/1999/xhtml&&& &head&id=&Head1&&runat=&server&& &title&后台管理系统&/title& &meta&http-equiv=&X-UA-Compatible&&content=&IE=EmulateIE7&&/& &style&type=&text/css&& .navPoint&{color:&&cursor:&&font-family:&W&font-size:&9pt} &/style& &script&src=&../Scripts/jquery-1.8.3.min.js&&&/script& &script&language=&JavaScript&&type=&text/javascript&& &&&&&&/* &&&&&&if&(window.screen)&{ &&&&&&&&var&aw&=&screen.availW &&&&&&&&var&ah&=&screen.availH &&&&&&&&window.moveTo(-3,&-3); &&&&&&&&window.resizeTo(aw+7,&ah+7); //&&&&&&&& &&&&&&} &&&&&&*/ &&&&function&switchSysBar()&{ &&&&&&&&jQuery(&#frmTitle&).stop(); &&&&&&&&if&(document.getElementById(&switchPoint&).innerHTML&==&&&&&)&{ &&&&&&&&&&&&jQuery(&#frmTitle&).animate({&width:&&hide&,&opacity:&'hide'&},&&fast&,&function&()&{ &&&&&&&&&&&&&&&&jQuery(&#frmTitle&).hide(); &&&&&&&&&&&&&&&&document.getElementById(&switchPoint&).innerHTML&=&&&&& &&&&&&&&&&&&&&&&_menu_width&=&0; &&&&&&&&&&&&&&&&jQuery(window).resize(); &&&&&&&&&&&&}); &&&&&&&&}&else&{ &&&&&&&&&&&&jQuery(&#frmTitle&).animate({&width:&&show&,&opacity:&'show'&},&&fast&,&function&()&{ &&&&&&&&&&&&&&&&jQuery(&#frmTitle&).show(); &&&&&&&&&&&&&&&&document.getElementById(&switchPoint&).innerHTML&=&&&&& &&&&&&&&&&&&&&&&_menu_width&=&171; &&&&&&&&&&&&&&&&jQuery(window).resize(); &&&&&&&&&&&&}); &&&&&&&&} &&&&} &&&&&/script& &/head& &style& body{width:100%;&height:&overflow-y:&overflow-x:&padding:0&margin:0} #Right{ scrollbar-arrow-color:&#f4ae21;&/*图6,三角箭头的颜色*/ scrollbar-face-color:ō&/*图5,立体滚动条的颜色*/ scrollbar-3dlight-color:ʚ&/*图1,立体滚动条亮边的颜色*/ scrollbar-highlight-color:ʚ&/*图2,滚动条空白部分的颜色*/ scrollbar-shadow-color:ϧ&/*图3,立体滚动条阴影的颜色*/ scrollbar-darkshadow-color:ʚ&/*图4,立体滚动条强阴 影的颜色*/ scrollbar-track-color:ʚ&/*图7,立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8;&/*滚动条的基本颜色*/ Cursor:url(mouse.cur);&/*自定义个性鼠标*/ } #dv_top&ul,li{ list-style: padding:0;&margin:0; font-size:14 } #dv_top&{&border-bottom:1px&#000&&height:&width:100%;} #dv_top&li{ margin-left:2float:&background-color:#FFF;&width:100&padding-top:10&height:20&text-align: border:1px&#000&&border-bottom:&font-weight:&color:#CCC;&cursor: } #dv_top&.sel { color:#2989F3;&background-color:#E9FCFE } &/style& &body&style=&margin:&0overflow:&height:100%;&&scroll=&no&& &script& &&&&var&thisC &&&&jQuery(document).ready(function&()&{ &&&&&&&&jQuery(&#dv_top&li&).click(function&()&{ &&&&&&&&&&&&jQuery(&.dv_top&).attr(&class&,&&&); &&&&&&&&&&&&jQuery(this).attr(&class&,&&dv_top&sel&); &&&&&&&&&&&&thisClass&=&&dv_top&sel&; &&&&&&&&&&&&window.open(jQuery(this).attr(&menuUrl&),&&Left&); &&&&&&&&}); &&&&}); &&&&&&/script& &form&id=&form1&&runat=&server&& &&&table&border=&0&&cellpadding=&0&&cellspacing=&0&&height=&100%&&width=&100%&& &&&&&tr& &&&&&&&td&height=&50&&colspan=&3&&align=&left&&valign=&bottom&&nowrap&id=&frmTitle2&&background=&&%=&admin_res_path&%&Images/login_06.gif&&&&div&id=&dv_top&&style=&width:400&height:&float:&&& &&&&&&&&&&&ul& &&&&&&&&&&&&&li&class=&dv_top&sel&&onmouseover=&thisClass=this.classNthis.className='dv_top&sel';&&onmouseout=&this.className=thisC&&num=&0&&menuUrl=&leftmenu_for_content.aspx&&内容管理&/li& &&&&&&&&&&&&&li&onmouseover=&thisClass=this.classNthis.className='dv_top&sel';&&onmouseout=&this.className=thisC&&style=&display:;&&num=&2&&menuUrl=&leftmenu_for_system.aspx&&系统设置&/li& &&&&&&&&&&&/ul& &&&&&&&&&/div& &&&&&&&&&div&style=&width:200&height:&float:&font-size:12&&&&&a&href=&ModiPassWord.aspx&&target='Right'&style=&color:#FFFFFF;&&修改密码&/a&&&a&href=&Login.aspx?acction=quit&&style=&color:#FFFFFF;&&退出登陆&/a&&&/div&&/td& &&&&&/tr& &&&&&tr& &&&&&&&td&align=&center&&nowrap&valign=&top&&id=&frmTitle&&height=&100%&&&iframe&id=&Left&&class=&ifram_autoheight&&name=&Left&&src=&leftmenu_for_content.aspx&&&&scrolling=&no&&frameborder=&0&&style=&width:171height:100%&&&&&&/iframe&&/td& &&&&&&&td&style=&width:&9pt&&height=&100%&&id=&cc&&&table&border=&0&&cellpadding=&0&&cellspacing=&0&&height=&100%&&bgcolor=&#599DE8&& &&&&&&&&&&&tr&style=&cursor:&& &&&&&&&&&&&&&td&id=&qh&&style=&HEIGHT:&100%;&width:&13&cursor:pointer&&onclick=&switchSysBar()&&title=&点击关闭/打开左栏&&&font&style=&FONT-SIZE:&9&CURSOR:&&COLOR:&#ffffff&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&屏幕切换&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&span&id=&switchPoint&&title=&点击关闭/打开左栏&&&&&/span&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&屏幕切换&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&br/& &&&&&&&&&&&&&&&/font&&/td& &&&&&&&&&&&/tr& &&&&&&&&&/table&&/td& &&&&&&&td&height=&100%&&width=&100%&&valign=&top&&&iframe&frameborder=&0&&class=&ifram_autoheight&&id=&Right&&name=&Right&&scrolling=&auto&&src=&Main.aspx&&&style=&width:100%;height:100%;overflow-x:&&&&&/iframe&&/td& &&&&&/tr& &&&/table& &/form& &script& &&&&var&_content_height&=&100; &&&&var&_content_ &&&&var&_content_ &&&&var&_menu_ &&&&jQuery(document).ready(function&()&{ &&&&&&&&_content_width&=&jQuery(window).width()&-&jQuery(&#frmTitle&).width(); &&&&&&&&_menu_width&=&jQuery(&#frmTitle&).width(); &&&&&&&&jQuery(window).resize(function&()&{ &&&&&&&&&&&&jQuery(&#Left&).height(jQuery(window).height()&-&50); &&&&&&&&&&&&jQuery(&#Left&).contents().find(&.menu&).height(jQuery(window).height()&-&50&-&68); &&&&&&&&&&&&jQuery(&#Right&).height(jQuery(window).height()&-&50); &&&&&&&&&&&&jQuery(&#Right&).contents().find(&.list&).height(jQuery(window).height()&-&50&-&_content_height); &&&&&&&&&&&&_content_width&=&jQuery(window).width()&-&_menu_ &&&&&&&&&&&&if&(_content_resize&!=&null)&{ &&&&&&&&&&&&&&&&_content_resize(); &&&&&&&&&&&&} &&&&&&&&}); &&&&&&&&jQuery(&#Left&).load(function&()&{ &&&&&&&&&&&&jQuery(&#Left&).height(jQuery(window).height()&-&50); &&&&&&&&&&&&jQuery(&#Left&).contents().find(&.menu&).height(jQuery(window).height()&-&50&-&68); &&&&&&&&}); &&&&&&&&jQuery(&#Right&).load(function&()&{ &&&&&&&&&&&&jQuery(&#Right&).height(jQuery(window).height()&-&50); &&&&&&&&&&&&jQuery(&#Right&).contents().find(&.list&).height(jQuery(window).height()&-&50&-&_content_height); &&&&&&&&}); &&&&}); &/script& &/body& &/html&
O(∩_∩)O谢谢楼上，代码好多，我先看看
function&SetCwinHeight(){&&& &&&&&&&&&&&&&&&&&&&&&&&&var&h; &&&&&&&&&&&&&&&&&&&&&&&&if(navigator.userAgent.indexOf(&MSIE&)&0){ &&&&&&&&&&&&&&&&&&&&&&&&&&&&h&=&document.getElementById(&panel-1022&).clientHeight& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-&document.getElementById(&header-1029&).clientH &&&&&&&&&&&&&&&&&&&&&&&&}else{ &&&&&&&&&&&&&&&&&&&&&&&&&&&&h&=&document.getElementById(&ext-gen1046&).clientH &&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&document.getElementById(&UFrame&).height&=&h; &&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&&&window.setInterval(&SetCwinHeight()&,&2000);
问题的原因找到了，IFRAME的高度需要的是clientHeight，网上搜出来的都是框架内容页面的scrollHeight。
EXTJS本身已经实现高度自适应了，所以简单的方法是直接去取框架外层DIV的高度重新设定下新的高度就可以。
在IE和非IE下有点不一样！是不是跟EXTJS在IE和非IE下的加载呈现顺序有关就不太清楚了。
感谢楼上给的代码，最后还是从博客&-&园得到的思路，这里没以前好了
18:03&&&[]
我在一个页面里插入了一个iframe，iframe高度，我通过js设置的自增长，原本的iframe属性scrolling=no这样设置的，现在iframe插入的页面宽度，超过iframe原本定义的宽度。请问如何设置，可以实现，当页面过宽时出现横向滚动条，竖向还让iframe自增长，竖向滚动条不要
11:04&&&[]
jsp&iframe滚动条的问题&高度是足够的，但是因为出左右滚动条了，默认加高了滚动条的宽度，上下滚动条就出现了，怎么解决
回复讨论(解决方案)
在标签里面加scroll=“no”就行了
在标签里面加scroll=“no”就行了 左右滚动条是需要的
-08:58&&&[]如何在有很多图片的iframe页面中用js动态设置iframe的高度 - 心静如水，人淡如菊! - ITeye技术网站
博客分类：
在iframe的网页中用js动态设置iframe的高度不难，如果iframe加载的网页中包含了很多的图片，这些图片的加载会受到网速的影响，会有很多延迟，那该如何动态设置iframe的高度，而不受这些图片的延时的影响呢？下面给出示例函数：
var PWin = parent.window, PDoc = PWin.
var resetIframeHeight = function(sid) {
if (PWin && PWin != window) {
var d = PDoc.getElementById(sid);
var dImgs = document.getElementsByTagName('img');
d.getElementsByTagName('iframe')[0].style.height = document.body.scrollHeight + 'px';
for (var i=0;i&dImgs.i++) {
dImgs[i].onload = function() {
d.getElementsByTagName('iframe')[0].style.height = document.body.scrollHeight + 'px';
其中resetIframeHeight()函数的参数sId是iframe外面的容器的id，比如div，示例如下
&div id="sId"&
&iframe src="xxx.html"&&/iframe&
通过给每个img标签加上一个onload事件回调，在图片加载完成的时候，再去设置一下iframe的高度，就能很好地解决图片加载延迟带来的iframe内网页高度不断发生变化的问题；一切看起来就很自然了，当加载完一个图片的时候，iframe的网页高度就会自动增加，一直到所有图片都加载完成。
齐晓威_518
浏览: 239183 次
来自: 郑州
你好，请问这个还有源码吗？我刚开始接触这个，想要源码学习一下. ...
这是增加删除列，，，，
很明显这是增加删除行
[/color]x-sma ...