iframe 无刷新跳转

IFrame实现页面无刷新

一.html 和s代码段 <!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> <title>使用 ifram

利用history实现无刷新跳转界面

看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端),来揭秘history的秘密.首先我们了解一下核心方法: window.history.pushState:方法:为histroy建立历史记录,该方法传入三个函数:1.对应url的信息2.下一个界面的title 3 .需要你动态改变的地址栏中德url. window.history.state:属性:

有趣的API： history pushState/popstate 无刷新跳转(pjax)

API介绍首先看看API如何使用: history.pushState(state, title, url) : 无刷新的向浏览器历史最前方加入一条记录. state(any) 需要保存的数据,这个数据在触发popstate事件时保存在event.state上. title(string): Firefox 目前忽略了這個參數,雖然他以後有可能會採用.如果以後改變了這個作法,傳送空白的字串應該還會是安全的.另外,你可以傳送一個短的標題來敘述你想要到的state. 目前没有发现有地方保存这个

iframe无刷新跨域上传文件并获取返回值

通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原来的域:picupload.t.sina.com.cn. 研究了一下新浪微博的处理方法,这里大概演示一下. 首先是一个正常的上传页面 upload.html <script> // 这个函数将来会被iframe用到 function getIframeVal(val) { alert(val);

黄聪：Pjax无刷新跳转页面实现，支持超链接与表单提交

什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面. 那么如果我们想要实现这样的功能, 我们如何做呢? 我发现pjax提供了一个脚本支持这样的功能. pjax项目地址在 https://github.com/defunkt/jquery-p

ajax ＋jsp＋iframe无刷新上传文件[转]

http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16:43首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的. 而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方

Html使用Iframe无刷新上传文件，后台接收

html代码:我是发送请求到teacher_center.aspx,不是到.ashx一般处理程序里,需要加 runat="server",有空我再试试发送请求到 .ashx 里 <input type="file" class="upload" id="fu_book_img" name="fu_book_img" runat="server" onchange="Sel

Pjax无刷新跳转页面实现，支持超链接与表单提交

什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面. 那么如果我们想要实现这样的功能, 我们如何做呢? 我发现pjax提供了一个脚本支持这样的功能. pjax项目地址在 https://github.com/defunkt/jquery-p

ajax与HTML5 history API实现无刷新跳转

一.ajax载入与浏览器历史的前进与后退 ajax可以实现页面的无刷新操作,但是无法前进与后退,淡出使用Ajax不利于SEO.如今,HTML5让事情变得简单.当执行ajax操作时,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的),于是返回的试后,通过URL或其他传参我们就可以还原到ajax之前的模样. 二.温故知新 HTML4中的History API 属性 length 历史的项数.javascript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的

利用iframe无刷新上传文件的坑

页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性值一样,意思就是把form表单上传文件的刷

iframe无刷新跨域上传文件并获得返回值

原文:http://geeksun.iteye.com/blog/1070607 需求:从S平台上传文件到R平台,上传成功后R平台返回给S平台一个值,S平台是在一个页面弹出的浮窗里上传文件,所以不能用直接用向R平台submit的方式提交,换用一种类AJAX方式实现,此处用了target的方式,是一种伪AJAX. 提交页面代码: <form name="form_add" method="post" action="b.action" en

文件上传---form表单，ajax,jquery,以及iframe无刷新上传（processData，contentType讲解）

服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def get(self): self.render('index.html',list_img=IMG_LIST) def post(self, *args, **kwargs): name=self.get_argument('name') pwd=self.get_argument('pwd') #f

Ajax技术实现页面无刷新跳转

Ajax实现无刷新显示新的页面 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $('#test').load('/example/jquer

利用HTML5的History API实现无刷新跳转页面初探

HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围.本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和. 方法 back() 后退,跟按下“后退”键是等效的. forward() 前进,跟按下“前进”键是等效的. go() 用法:history.go(x):在

iframe无刷新跨域并获得返回值

参考:http://geeksun.iteye.com/blog/1070607 /** * iframe跨域提交大数据 * @param action 跨域地址 * @param arr [ {name:'loginName',value:'liuxw'}, {name:'password',value:'123456'} ] * @param callUrl 服务器重定向该url指向画面.(callUrl所指向画面与IframCall函数调用画面在同一域名下) */function Ifra

HTML5 History API 实现无刷新跳转

在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL,动态显示页面内容. 比如: 当页面A和页面B内容不一样的时候,在HTML5之前,如果从页面A切换到页面B时,需要在浏览器下从页面A切换到页面B,或者说,如果需要有后退按钮功能的话,可以在URL地址加#XXXX 可以实现后退功能.那么现

HTML5 History API实现无刷新跳转

在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL,动态显示页面内容. 比如: 当页面A和页面B内容不一样的时候,在HTML5之前,如果从页面A切换到页面B时,需要在浏览器下从页面A切换到页面B,或者说,如果需要有后退按钮功能的话,可以在URL地址加#XXXX 可以实现后退功能.那么现在在HTML5中,可

HTML5实现无刷新修改URL

前言今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我尝试了俩种方式来修改url: window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了...,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载. window.

iframe实现面页无刷新提交表单

一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回一个xml或json数据,要么返回一个页面,要么返回一个页面片段,但是返回到哪里了,这些结果在哪里展示?其实这就是常常被忽略的一个问题,尤其是 ajax用多了,觉得无刷新是理所当然的.在默认情况下,在什么页面提交的,就会将返回的数据(json或页面或页面片段)给这个页面.这里的页面指一个框架,带有<html></ht

javascript控制页面（含iframe进行页面跳转）跳转、刷新的方法汇总

一.JS方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/javascript"> window.location.href="top.jsp"; </script> 注意如果top.jsp中有iframe标签,则top.jsp页面将会在iframe中被打开. 2.window.loction.r

web 开发之js---巧用iframe实现jsp无刷新上传文件

首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的. 而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法. 开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人

iframe 无刷新跳转

热门专题