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 ...
随机推荐
- Sublime Text 3 使用总结
第一,sublime工作区域介绍 标签(Tab):无需介绍.编辑区(Editing Area):无需介绍.侧栏(Side Bar):包含当前打开的文件以及文件夹视图.缩略图(Minimap):如其名. ...
- Daily Scrum 10.24
昨天我们的工作已经全面开始了,本来想等今天(25号)看那个燃尽图和燃速图能不能出来,结果还是没有,就先把我们的Task统计贴上来吧. 今天的Task统计: 至于燃尽图和燃速图的问题已经发老师邮件提问了 ...
- NBUT比赛 方格规律递推题
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26901#problem/A 题意:有一个 2*n的格子里,你可以选择任意一个格 ...
- Expect 初学
expect可以帮助脚本完成自动化.今天就用二种实例来介绍2种写法. 安装 yum -y install expect 一.直接用/usr/bin/expect 这种就不方便调用linux下的环境变量 ...
- java继承内部类问题(java编程思想笔记)
普通内部类默认持有指向所属外部类的引用.如果新定义一个类来继承内部类,那“秘密”的引用该如何初始化? java提供了特殊的语法: class Egg2 { public class Yolk{ pub ...
- php session_start() 非常慢 问题原因查找
最近在做东西的时候发现一个问题 有一个接口挂了 ,然后进行测试访问地址的时候,浏览器就一直处于等待响应的状态 怎么访问都不行,只有重启web服务器才行. 如果不重启web服务器进行代码调试,总发现在s ...
- windows 精简/封装/部署
给一个精简过的Windows7安装net35,提示自己到『打开或关闭Windows功能』里打开,然而发现并没有,只有一个ie9的功能.搜索尝试各种办法,显然都不行.用dism部署功能的工具,挂载一个完 ...
- Eclipse new server : Cancnot create a server using the selected type
1.退出 eclipse 2.到[工程目录下]/.metadata/.plugins/org.eclipse.core.runtime 3.把org.eclipse.wst.server.core.p ...
- ssm maven项目启动 报SYSTEM_PROPERTIES_MODE_ENVIRONMENT
1.jar包冲突,查看项目中的jar和pom.xml中配置的jar包 版本,把没用的jar包删掉
- 【java基础学习】字符串
字符串 1. java内存区域(堆区.栈区.常量池) 2. String方法 获取长度 length(); 获取位置 indexOf(index); lastIndexOf(index) 获取子串 c ...