最近需要对创业团队的网站进行改版,而我负责前端设计和实现。
下面是一些总结与体会:
当设计完成之前,我就跟和我配合的Java 后台说用iframe实现,结果说麻烦不肯,到最后突然对我说还是用iframe吧,说他以前也用过,很简单--!...其实我之间也基本没用iframe,对它比较陌生,但是 QQmusic 网页版就是用iframe 做的,印象比较深刻!
 
我设计的页面总体结构是与QQmusic网页版类似,网页头部和脚部都是固定,中间内容是通过iframe来展示。
 
用iframe之前,我想到要解决的问题有:
①iframe虽然有height这个属性,但是每次加载到里面的内容都是不同的,而且我实现的部分页面是需要动态加载能容的。
我的解决办法是:
iframe 首次加载成功后和 iframe页面内有动态增加内容时(导致整体高度有变化)都调用下面这个函数,来设置iframe高度
 function iframeLoaded() {
var contentFrame = document.getElementById('contentFrame');
if(contentFrame) {
contentFrame.height = contentFrame.contentWindow.document.documentElement.scrollHeight + "px";
}
}
 
②因为是做成像QQmusic网页版的单页面,所以我也利用hash变化来欺骗浏览器,让浏览器为我的页面跳转生成历史记录,但是后来发现,每次点击链接加载不用iframe时,都会生成两条相同的历史记录。这是为什么呢?后来发现,hash值改变会导致一次,iframe的src改变也会生成一次历史记录(包括hash的改变)。然后我又去看看QQmusic 是怎么实现只产生一次历史记录的,惊奇的发现,它的iframe的src一直没变(一直是 about:blank)。
 
<iframe name="contentFrame" id="contentFrame" width="100%" height="2207px" allowtransparency="true" scrolling="no" border="0" frameborder="0" src="about:blank"></iframe>
因此发现我之前对iframe有些误解,之前认为iframe只能通过src来获取内容,其实个人认为正确的是:iframe中的内容不一定是通过设置src后获取的,也可以是通过其它方式(例如通过ajax获取html后替换原视图而成);所以对于QQmusic来说,iframe只是一块渲染视图的容器,它里面显示的内容是由另外的逻辑来控制的。这样无须改变iframe的src(也就不会产生历史记录),从而可以动态修改iframe的内容了。如:
 window.onload = function(){
var iframe = document.getElementById("iframe")
var newDiv = document.createElement("div")
newDiv.innerHTML = "我要跑到iframe里"
iframe.contentWindow.document.body.appendChild(newDiv)
}
对于整体页面(用jQuery发出异步请求)
 $.ajax({
url: "原本iframe的src值", // 改为异步请求加载
type: "GET"
})
.done(function(data){
var iframe = document.getElementById("iframe")
iframe.contentWindow.document.documentElement.innerHTML = data; // 获取后直接插到iframe
})
所以,iframe的内容一直在改变,而它的src却一直是about:blank没变。因此也不会产生新的历史记录。
此时此刻,我心情是很开心的,然而,当我与iframe内的元素交互时,发现除了 CSS 的交互效果,<script src=""></script>写在<script></script>内的js代码都是不执行的(测试后发现直接添加到元素的onclick事件可以执行),而且在测试的过程中发现有时候CSS加载比较慢,导致HTML裸露出来,不知道为什么。这个要继续查查。
 
所以,最后我不采用通过ajax获取内容,再添加到iframe的做法。
而是采用移除原来iframe,再新建一个iframe插入的方式,这种方式也是不会产生新的历史记录。
 
 
解决了产生两条历史记录的问题后,剩下的问题就是iframe内的链接跳转,因为整体是通过主页面的hash值来路由的,所以iframe内的链接跳转是不能直接跳转的,他的跳转需要一定处理的流程:
 
/* 处理由iframe内发送的请求:
* ①首先接收iframe的参数
* ②根据参数生成对应的hash,并修改main_frame 的hash值
* ③根据hash值,修改iframe的src(我是通过删除原来的iframe,再添加新iframe的做法)
* */
 
如:
主页面的全局有一个接收iframe内a标签的data-hash的函数:
 function handleIframeRequst( iframeHash){
window.location.hash = iframeHash;
}
 
假设iframe内的一个a标签 : <a href="javascript:;" data-hash="main&sub"></a>
点击这个标签时,就会调用主页面的一个处理该data-hash的函数
parent.handleIframeRequst($(this).data("hash")); // 通过parent调用主页面的函数
 
主页面接收参数后,修改自身的hash值,然后解析hash值,生成相应的 iframe src值。
 
这样基本就可以将网站做成 类似 QQmusic 那样的单页面网站啦。 满足感 Up!Up!Up!

实现类似 QQ音乐网页版 的单页面总结的更多相关文章

  1. 腾讯QQ音乐网页版 音频初始化模块解压混淆js源码

    define("js/view/playerBar.js",function(t,e,o){ var i = t("js/lib/zepto.js"), a = ...

  2. MVC实现类似QQ的网页聊天功能-ajax(下)

    此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一 ...

  3. 爬取QQ音乐歌手的歌单

    import requests# 引用requests库res_music = requests.get('https://c.y.qq.com/soso/fcgi-bin/client_search ...

  4. MVC实现类似QQ的网页聊天功能-Ajax(上)

    说到QQ聊天,程序员首先想到的就是如何实现长连接,及时的接收并回馈信息.那么首先想到的就是Ajax,Ajax的运行机制是通过XMLHttpRequest向服务器发出异步请求,并接受数据,这样就可以实现 ...

  5. 从网易云音乐网页版无登陆下载MP3的办法

    用chrome浏览器就能办到 现在,你还为下载不到满意的音乐而苦恼吗?

  6. 类似 QQ 音乐底部常驻播放栏(AVQueuePlayer)

    一开始搞了个基类,但是这样所有类都要继承它才可以.后来考虑把他加到 window 上.但是在 appdelegate 中没有办法可以加到上面,最后在 keyWindow 的rootViewContro ...

  7. 前端练手小项目——网页版qq音乐仿写

    qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...

  8. QQ音乐官方定制精简版v1.3.6 纯净无广告

    介绍 近期腾讯推出了QQ音乐简洁版.顾名思义,QQ音乐简洁版就是官方精简后的版本,没有内置任何广告.完全专注于听歌,不存在直播.K歌.短视频等花里胡哨的内容.如有违规,请删删.. 结尾附pc端 QQ音 ...

  9. (DNS被劫持所导致的)QQ音乐与视频网页打开很慢的解决方法

    这周开始发现一个很让人抓狂的现象,QQ音乐网页(http://y.qq.com)与QQ视频(http://v.qq.com/)网页打开超慢,甚至是无法打开,严重影响了业余的音乐视频生活. 以QQ视频为 ...

随机推荐

  1. FIREDAC连接MSSQL 2000报不能支持连接MSSQL2000及更低版本的解决办法

    FIREDAC连接MSSQL 2000的时候会报错,原因是MSSQL CLIENT11或MSSQL CLIENT10客户端驱动程序已经不支持连接MSSQL2000及更低版本的数据库. 解决办法: 设置 ...

  2. JQuery中的AJAX参数详细介绍

    Jquery中AJAX参数详细介绍 参数名 类型 描述 url String    (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...

  3. 沉金板VS 镀金板

    沉金板VS 镀金板一.沉金板与镀金板的区别1.原理区别FLASH GOLD 采用的是化学沉积的方法!PLANTINGGOLD 采用的是电解的原理!2.外观区别电金会有电金引线,而化金没有.而且若金厚要 ...

  4. rqnoj-396-SY学语文-dp

    纯动态规划. 注意初始化为-INF #include<stdio.h> #include<algorithm> #include<iostream> #includ ...

  5. myGeneration代码生成器

    转自:http://www.cnblogs.com/leitwolf/archive/2007/07/27/833255.html http://blog.csdn.net/happyhippy/ar ...

  6. IoC模式(Inversion of Control)

      1.依赖 依赖就是有联系,有地方使用到它就是有依赖它,一个系统不可能完全避免依赖.如果你的一个类或者模块在项目中没有用到它,恭喜你,可以从项目中剔除它或者排除它了,因为没有一个地方会依赖它.下面看 ...

  7. 数据库MySQL常用命令复习

    -- 查看数据库 show databases; -- 创建数据库 create database '数据库名'; -- 删除数据库 drop database '数据库名'; -- 选库 use ' ...

  8. 实现CCLayer只显示一个矩形可见区域

    转自:http://blog.csdn.net/while0/article/details/11004147 CCLayer的区域可能会比较大,怎样让它只显示其中一部分区域呢?  这个还是有很多场景 ...

  9. VS2012开发ActiveX插件 尝试1

    今天闲来无聊研究了下 ActiveX插件开发,以前一直以为很牛逼,然后发现还是比较简单的东西.. 首先: 在开始前 准备好 VS12开发工具,cabarc.exe 工具(注:这是 用来 将文件打包成c ...

  10. android常见错误--Unable to resolve target ‘android - 8’

    这是由于项目的android的版本没有设置好,解决方法如下: 1,clean项目 选择[project]-[clean] 选中需要进行clean的项目,点击[ok] 2,重新build 选择[proj ...