web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。...上面的效果实现起来很简单,无非就是给按钮绑定点击事件,事件里发送一个ajax请求,请求完成后,回调函数根据返回结果,再操作dom元素。 那同样的表单登陆,用iframe如何实现呢?...同样实现了页面的局部刷新,而且用的不是ajax技术。...原理是将表单提交后跳转的页面,指向本页的iframe标签中,iframe刷新后,返回的是后端输出的javascript标签包裹的js代码,而返回的javascript代码可以直接运行,并且可以操作父页面中的元素...封装原生ajax还得考虑兼容,iframe就不用考虑兼容性的问题,但ajax对比iframe会更加简洁明了。在ajax没有普及之前,web开发的局部刷新用的都是iframe。
js版 复制代码 代码如下: function myrefresh() { window.location.reload(); } setTimeout...('myrefresh()',1000); //指定1秒刷新一次 4,JS刷新框架的脚本语句 复制代码 代码如下: //刷新包含该框架的页面用 现在假设top.html (即上面的页面) 有七个button来实现对...js版 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面)...6 out.write("window.opener=null;"); 7 out.write("window.close();"); 8 out.write(""); 四、JS
先看一段代码(PHP例子) 1、表单代码(form.html): iframe name="testIframeName" style="display:none;">iframe> <form
问题所在,我所用的layui后台管理系统的框架是之前遗留下来的,2017年的版本,iframe窗口不刷新的问题,也就是框架本身的缓存问题,现在layui针对这一问题已经升级版本,就不存在问题了。...先说一下要修改的地方:点击左侧的菜单栏(即打开一个新的iframe层页面),第一次打开的窗口会刷新,但是再次点击左侧菜单的时候就不会刷新了,每次这个页面获取到新的数据,iframe窗口里面都是有缓存的,...都需要手动F5刷新才会更新,因此带来不便。...改为:每次点击左侧菜单,都会触发一次刷新事件。 ? 解决办法:打开tab.js文件 1:在配置里面添上 autoRefresh:true ?...('div.layui-tab-content > div').eq(tabIndex).children('iframe')[0].contentWindow.location.reload();*/
js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他的iframe的id 在父页面中定义函数,再到子页面中调用。...iframe for(i=0;i js怎样获取iframe,src中的参数 如何获取iframe里的src里面的属性 js如何修改iframe 中元素的属性 iframe 属性 及用法越详细越好 。。...在线等 iframe元素的功能是在一个html内嵌一个文档,创建一个浮动的郑iframe可以嵌在网页中的任意部分 name:内嵌帧名称 width:内嵌帧宽度(可用像素值或百分比) height:内嵌帧高度...(可用像素值或百分比) frameborder:内嵌帧边框 marginwidth:帧内文 jQuery怎么给iframe的src赋值 给iframe src赋值,代码如下: 特别注意: 1.上述jquery...代码不能缺少 $(document).ready(); ,否则iframe src赋值失败。
history.back()和history.go(-1)都可以实现返回上一页并不刷新 向要页面后退刷新使用:window.location.href = document.referrer;即可实现
当我们使用多标签iframe的后台管理模板时,需要在一个iframe中跳转到另一个iframe,并且对新iframe进行操作,这篇文章记录一下我在开发过程中编写的代码。...存放iframe的标签.tabsbody-item 结构如下 .tabsbody-item 订单列表 ——iframe .tabsbody-item 收款点 ——iframe # 在iframe中,...对父级窗口进行操作,搜索#tab中已打开标签的列表 var iframe = $(window.parent.document).find("#tab > li"); if (iframe.length...# 模拟点下该标签 $(this).trigger('click'); # 刷新 var iframet = $(window.parent.document...(true); } }); } 这样子就从A标签内操作父窗口,打开B标签页,并且刷新B标签页的内容。
首先要知道如果直接在iframe 页面调用requestFullScreen()是没有效果的,需要在当前iframe 的parent 页面调用,其实iframe的 DIV 也是这个原因。...具体代码实现如下 function fullScreen(iframeId) { /* 获取父类的document */ var parentDoc = parent.document;.../* 定义一个接收元素的变量 */ var thisIframe = null; $("iframe", parentDoc).each(function (index, e)
iframe src="1.htm" name="ifrmname" id="ifrmid">iframe> 方案一: 用iframe的name属性定位 方案二: 用iframe...input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()"> 终极方案: 当iframe
这里介绍了JS前进、后台、刷新的各种方法。也解释了很多前进后退函数出问题的原因。...下面是用按钮做前进后退的JS: 刷新 onclick="window.location.reload()"/> 刷新...onclick="window.history.go(-1);window.location.reload()"/> 其中,history.go(-2),要写为-2,因在按钮事件触发前,已刷新一次页面...history.back()是会上一页 history.go(i)去指定的某页 如果是history.go(0)那就是刷新页面,这两个属于JS代码,相当于IE的前进、后退功能。
value=后退 οnclick="window.history.go(-1)"> 刷新...刷新 οnclick="window.location.reload()"> 刷新 οnclick=...value=刷新 οnclick="window.location.assign(location)"> 刷新 οnclick="window.location.replace...(location)"> 后退+刷新 刷新 οnclick="window.history.go(-1);window.location.reload...()"> 注:window.可不加 history.go() 说明 history.go(0) 参数为0,表示刷新; history.go(1) 参数为正数,表示前进。
所以每个知识点都会写成文章,所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 跨域的东西, 简直不要接触太多,网上相关内容一抓一大把,但是突然学习到一个关于前端解决跨域的方式 就是 利用 iframe...1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战 解决场景 现在我们在 a.com 的域名下有一个页面 我们要请求 b.com 下的一个接口,很明显是会跨域的,无法直接请求 今天我们使用 iframe...需要传递给真正需要数据的父页面(同样是 a.com 下) 大概了解之后,我们来说一下简单流程 现在有 a.com 下的内容页 A,需要请求接口 b.com/xxxx,但是跨域 1、内容页 A 嵌入一个隐藏 iframe...,iframe 加载 b.com 下的辅助页面 B 2、辅助页面B 开始请求接口 b.com/xxx,请求成功,存放到 window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页...比如请求的接口需要某些参数,这些参数是父页面提供的,所以就只能把这些参数放到 iframe 的 url 上以便通信 拼接 url 函数 function parseUrl (url, param) {
forward() { history.go(+1); //前进1页 } function refresh() { history.go(-0) //刷新...script> 刷新
viewport" content="width=device-width, initial-scale=1.0"> Document 我来自 iframe... // 判断本页面来自 iframe // 可行 if (window.frames.length !...= parent.frames.length) { console.log('在iframe中111'); } // 不可行 if (self.frameElement...&& self.frameElement.tagName == "IFRAME") { console.log('在iframe中222'); } // 可行 if...= top) { console.log('在iframe中333'); } // 禁止页面被别人iframe // if (top.location !
页面操作首先需要在父页面引入一个 iframe 标签,用于放置接口传过来的页面iframe id="tab1" width="100%" height="300">iframe>其中,参数 width...用来设置 iframe 的宽度, height 用来设置 iframe 的高度。...页面 js 代码如下//基础信息 tabfunction tab1() { console.log("tab1 click"); var url = prefix+"/toIframe?...页面可以看到已经显示当然,如果你想在 js 方法中动态控制 iframe 的宽高,可以如下更改按钮点击事件绑定的方法 tab1()//基础信息 tabfunction tab1() { console.log...id=1&name=张三"; $('#tab1').attr("src",url);}项目热部署后刷新页面效果如图总结总的来说,通过 iframe 嵌套页面的方式可以将通过接口传来的页面完整的嵌入到当前页面中
这与用户单击浏览器的刷新按钮的效果是完全一样的。 如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。...这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
如何实现刷新当前页面呢?借助js你将无所不能。 1,reload 方法,该方法强迫浏览器刷新当前页面。...js版 代码如下: function myrefresh() { window.location.reload(); } setTimeout...('myrefresh()',1000); //指定1秒刷新一次 4,JS刷新框架的脚本语句 代码如下: //刷新包含该框架的页面用 现在假设top.html (即上面的页面) 有七个button来实现对...js版 三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面) 代码如下: 1 PrintWriter out =
JS 禁用移动流量球、禁用iframe嵌入 情况1: native 与h5 交互 使用WebViewJavascriptBridge,此时,在native 会在打开你的网页的时候,嵌入一个iframe...原因在于移动流量球,在打开你页面的同时,给你嵌入了iframe,加入了他们的代码,移动流量球会检测到你的浏览情况,有时候更恶心的是,还会给你推送广告,移动、联通、电信都会有这个东西。...3、也就是使用 js 去实现禁止底部iframe载入网页。...var iframes = document.getElementsByTagName("iframe"); for(var i=0;i<iframes.length;i++){ if(iframes...="name") iframes[i].removeNode(true); } ---- 4、更改 iframe 的 属性 把 src 属性改为: about:blank 。
今天木槿来探讨一下js判断iframe加载是否成功的方法,并且兼容多种浏览器。...由于经常需要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。...这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面:ie浏览器IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在...iframe.readyState == "loaded"){//代码能执行到这里说明已经载入成功完毕了//要清除掉事件iframe.detachEvent( "onreadystatechange",...状态会跳过 complete 所以我们loaded状态也要判断if (iframe.readyState === "complete" || iframe.readyState == "loaded")
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第3节-《不用 js 实现文件无刷新上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口...既然要说不用 js 实现文件无刷新上传,那就要先说说最原始的文件上传,也就是在 ie 时代是怎么处理的。...最原始的文件上传 使用 form 表单上传文件 在 ie时代,如果实现一个无刷新的文件上传那可是费老劲了,大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定,在那个时代ie 就是最好用的浏览器...(不用 js 的无刷新上传) - iframe 这里说的是在 ie 时代的上传文件局部刷新,借助 iframe 实现。...局部刷新 页面内放一个隐藏的 iframe,或者使用 js 动态创建,指定 form 表单的 target 属性值为iframe标签 的 name 属性值,这样 form 表单的 shubmit 行为的跳转就会在
领取专属 10元无门槛券
手把手带您无忧上云