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 ...
随机推荐
- P4实验问题 解决python模块导入
参考:Python导入自定义包或模块 在执行./run_demo.sh的过程中,遇到了python的模块问题: root@ubuntu:/home/wasdns/tutorials/SIGCOMM_2 ...
- fight
为啥用block copy. 从栈到拷贝到堆 循环引用,控制器引用block. block里面调用 self self引用控件,控件引用block,block里面引用self http://www. ...
- 使用coverage工具统计python单元测试覆盖率
Coverage简介 Coverage是一种用于统计Python代码覆盖率的工具,通过它可以检测测试代码对被测代码的覆盖率如何.Coverage支持分支覆盖率统计,可以生成HTML/XML报告. 官方 ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- eNSP的使用
1- 进入华为路由器界面配置ipThe device is running!####################################Nov 1 2016 23:39:24-08:00 ...
- 什么是core dump linux下用core和gdb查询出现"段错误"的地方
什么是core dump linux下用core和gdb查询出现"段错误"的地方 http://blog.chinaunix.net/uid-26833883-id-31932 ...
- html中表table行循环滚动例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><meta h ...
- Linux下Redis安装与PHP扩展(PHP7适用)
一,软件准备 #redis wget http://download.redis.io/releases/redis-3.0.7.tar.gz #phpredis 非php7使用 下载后文件名为:ph ...
- XML中文本节点存储任意字符的方法
XML xml是一种可扩展标签语言, 为众多浏览器支持解析, ajax更是利用xml来完成服务器和客户端之前的通信. xml基本元素为 <label>xxx</label>, ...
- pptp记录日志
/etc/ppp/ip-up #!/bin/bash # This file should not be modified -- make local changes to # /etc/ppp/ip ...