js页面刷新之实现框架内外刷新(整体、局部)
这次总结的是框架刷新:
框架内外的按钮均可以定义网页重定向,
框架内部页面的按钮可以实现局部刷新,
框架外部页面的按钮可以实现整页刷新。
代码如下(两个html页面):
<!--主界面index.html-->
<iframe src="页面刷新.html" frameborder="1"></iframe>
<h1 id="iframeout">框架外内容</h1>
<button onclick="fresh()">框架外刷新</button> <script>
var h1 = document.getElementById('iframeout');
function iframeout(){
h1.style.color = "yellow";
h1.innerText = "我变化了";
}
setInterval(iframeout, 800);
function fresh(){
// 框架主页面刷新,可以实现下面两个功能:
top.location.reload(); //刷新整页
// window.parent.location.href='http://koushuling.top'; //框架页重定向
}
</script>
<!--框架页面:页面刷新.html-->
<style>
body{
background-color: gray;
}
</style> <h1 id="test">框架内页面</h1>
<button onclick="fresh()">框架内刷新</button> <script>
var h1 = document.getElementById('test');
function test(){
h1.style.color = "red";
h1.innerText = "我变化了";
}
setInterval(test, 1000);
function fresh(){
// 框架内页面刷新:可实现局部刷新与整个页面重定向
self.location.reload(); //刷新框架内页面
// window.parent.location.href='http://koushuling.top'; //页面重定向
}
</script>
如有错误,请您更正!
js页面刷新之实现框架内外刷新(整体、局部)的更多相关文章
- js页面跳转(含框架跳转)整理
js方式的页面跳转1.window.location.href方式 <script language="javascript" type="text/java ...
- js 实现返回上一页和刷新等页面跳转功能
原文 出处http://www.2cto.com/kf/201111/109821.html 1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go ...
- js页面刷新跳转的几种方式及区别
跳转常用方法: window.location.href="index.php"; window.history.back(-1);//类似于按钮,参数是负几,就后退几次. win ...
- JS 页面刷新或重载
一.先来看一个简单的例子:下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做.frame.html 由上(top.html)下(bottom.h ...
- JS页面跳转和js对iframe进行页面跳转、刷新
一.js方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/ja ...
- JS 页面刷新以及页面返回的几种方式
1.通过标签形式的跳转页面 <a class="popup" href="~/WeiXin/Shoppingguide/StockData">&l ...
- JavaScript刷新页面的方法(包括Frame框架的刷新方式)
JavaScript刷新页面的方法 1 history.go(0) 去指定的某页 2 window.location.reload()刷新当前页面 window.location.relo ...
- PHP和JS页面跳转和刷新总结
PHP 页面跳转: // 只是跳转,所以一定要用die();或者exit;终止下一步操作; header('location:index.php'); exit; // 等待3秒,跳转并刷新 head ...
- js页面刷新之实现普通页面
准备面试题目的时候遇到了页面刷新,就整理了一下,网上查找,大概就是八种方法,但是自己测试的时候出现了几个问题,跟大家分享: 首先准备一个测试页面: <!--html代码--> <h1 ...
随机推荐
- wget 下载整个网站,或者特定目录
需要下载某个目录下面的所有文件.命令如下 wget -c -r -np -k -L -p www.xxx.org/pub/path/ 在下载时.有用到外部域名的图片或连接.如果需要同时下载就要用-H参 ...
- javascript中判断对象类型
<script type="text/javascript"> //判别一个对象属性在不在某个对象中 //in 是用于查找某个属性是否存在于对象中,它会把对象 //里面 ...
- FIO 测试磁盘iops 以及读写
最近在做mariadb的性能,感觉io 有瓶颈,就使用fio 来测试一下磁盘.下文为转载文章(温馨提示:此命令很伤硬盘,测试前请备份数据,- -我就写坏了一个.) FIO 是测试IOPS的非常好的工具 ...
- 词频junit测试
package search; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; impor ...
- win10如何让她闭嘴、按什麽建系统都要说话、如何让她闭嘴?
win10如何让她闭嘴.按什麽建系统都要说话.如何让她闭嘴? 开始 设置 轻松使用 讲述人,关掉……
- IOS第18天(9,核心动画-动画组)
****动画组 // 核心动画都是假象,不能改变layer的真实属性的值// 展示的位置和实际的位置不同.实际位置永远在最开始位置 #import "HMViewController.h&q ...
- objective-c基础教程——学习小结
objective-c基础教程——学习小结 提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...
- Postgres-enum
-- 1. rename the enum type you want to change alter type some_enum_type rename to _some_enum_type; - ...
- 相识从C语言开始
大家好,我是你们这学期C语言的助教吴科桥(女O(∩_∩)O),非常开心能在你们美好的大学这站与你们相遇,希望可以为你们学习C语言略尽绵薄之力. 开学第一周: 1. 希望每个同学都可以有自己的博客,我会 ...
- centos 6.7下 elasticsearch的安装
1.下载elasticsearch的安装包,用ftp上传到linux系统下目录中,如在当前用户root的目录下新建目录elasticsearch,放入安装包 不要忘了添加执行权限 chmod +x * ...