使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法
2017-03-16 22:10
351 查看
pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能。
但是,在使用中,若没有正确使用,仍然会出现一些问题。
比如,我们在使用pjax后,能够在不加载整个页面的情况下,刷新局部的页面,并能很好的保留浏览器的前进和后退功能,但是,按F5或点击浏览器刷新按钮时,页面刷新后仅加载内容页部分,母版页的内容丢失。
原因是,我们沿用了ajax的思想,每次只加载要替换的部分。而pjax允许你跳转到一个完整的页面,然后只将目标页面中指定的部分替换原页面指定的部分。也就是说,我们应该跳转到一个完整的页面,而不应该是内容页部分。
我们用图示进行说明。
但是,由于地址栏中的url是新页面的地址,一旦刷新,“错误的做法”就没有母版页的内容了,而“正确的做法”仍然能得到完整的页面。
【参考文献】
[1] https://my.oschina.net/sub/blog/123447
[2] https://github.com/defunkt/jquery-pjax (pjax官网)
但是,在使用中,若没有正确使用,仍然会出现一些问题。
比如,我们在使用pjax后,能够在不加载整个页面的情况下,刷新局部的页面,并能很好的保留浏览器的前进和后退功能,但是,按F5或点击浏览器刷新按钮时,页面刷新后仅加载内容页部分,母版页的内容丢失。
原因是,我们沿用了ajax的思想,每次只加载要替换的部分。而pjax允许你跳转到一个完整的页面,然后只将目标页面中指定的部分替换原页面指定的部分。也就是说,我们应该跳转到一个完整的页面,而不应该是内容页部分。
我们用图示进行说明。
错误的做法
//内容页未设置母版页 @{ Layout = null; }
$(function () { $(document).pjax('a[data-pjax]', '#main_content', { timeout: 10000 }); });
正确的做法(每个页面都应该是完整的页面)
//内容页应该设置母版页 @{ Layout = "~/Views/Shared/_Layout.cshtml"; }
$(function () { $(document).pjax('a[data-pjax]', '#container', { fragment: '#container', timeout: 10000 }); });
两种方法的比较
首先,两种方法均能实现局部刷新、浏览器的前进和后退的要求;但是,由于地址栏中的url是新页面的地址,一旦刷新,“错误的做法”就没有母版页的内容了,而“正确的做法”仍然能得到完整的页面。
代码解释
fragment:CSS selector for the fragment to extract from ajax response (从ajax回应中提取的片段的CSS选择器)【参考文献】
[1] https://my.oschina.net/sub/blog/123447
[2] https://github.com/defunkt/jquery-pjax (pjax官网)
相关文章推荐
- 浏览器返回按钮不会刷新页面解决方案---使用情景:点击浏览器左上角的后退按钮,页面需要刷新的情况
- 【内容转载】iOS开发----Xcode7升级之后插件无法使用与不小心点击Skipbundle的解决办法
- 使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
- 在使用FireFox浏览器时,经常打开新标签,页面总是不断自动刷新,解决办法!
- 无法显示 XML 页。 使用 XSL 样式表无法查看 XML 输入。请更正错误然后单击 刷新按钮,或以后重试的解决办法
- AJAX实现不刷新页面点击按钮在目标位置加载目标内容
- C#.NET 中按钮点击一次刷新,第二次才会触发按钮事件解决办法
- 使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题
- 点击浏览器后退按钮时刷新验证码的方法
- 在导航栏里,点击节点,触发页面刷新,重新读取数据库,并重新进行控件内容绑定,速度很慢,如何解决
- 刷新后 按钮事件再次执行的解决办法
- 当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)
- VC++ 6.0点击打开文件按钮出错解决办法
- 浏览器安全问题导致activex不能使用的终极解决办法_悄悄俏俏
- Android的ListView使用BaseAdapter时不显示List的内容的解决办法
- 使用浏览器测试Web服务时出现提示“The test form is only available for requests from the local machine.”的解决办法
- ASP.NET后台代码方式识别页面“按钮点击”和浏览器F5“刷新”事件
- eclipse在新版本GTK(2.18) 上的一个bug--鼠标点击按钮无响应的解决办法