URL网址里面执行JavaScript代码
作者:秋了秋 发表时间:2016年06月06日
很多时候我们分享一个网页都是为了让别人浏览网页内容,一种通过url的形式进行传播。这意味着很多局限性,不能分享网页动态交互效果。比如说分享一个网页的某个链接的点击后的状态,分享网页里面的播放特定的音乐,分享网页里面的某一块内容而其他内容不想被别人看到。。。等等等等
在不影响网站的数据与结构的前提下,要实现这些效果唯有JavaScript交互代码而唯一的线索就是通过url实现。而不改变url访问内容的形式就是在网址后面传参。到这里,思路已经很明朗了,就是把JavaScript代码通过网址参数形式放在网址后面,比如//netblog.cn?jscode=alert("秋叶网络博客"),那么别人通过这个网址访问就会弹出一个提示框,同理可加入任意的JavaScript代码,如button的点击,音乐的播放等等。而被分享的网站需要对网址做处理,如下:
(function(){ var url=decodeURIComponent(document.URL); if(url.indexOf("jscode=")>-1){ var jscode=url.split("jscode=")[1]; if(jscode.indexOf(";&")>-1){jscode=jscode.split("&")[0];} eval(jscode); } })()
需要注意的是参数上的js需要压缩,不能有换行,不宜过长,适宜做一些小程序,小交互。必要以分号结束,严谨为了排除js代码中&符号与参数之间的连接符&的混淆影响。这段代码最好放在所有代码后面,为了防止交互操作未定义就执行交互了(会看不到效果)。
这样的话我们就可以任意的分享网页中任意的局部效果。
让一打开秋叶网络博客就滚动一段距离吧://netblog.cn?jscode=$('body,html').animate({scrollTop:'2800px'})
让一打开秋叶网络博客就播放音乐吧://netblog.cn?jscode=$('#music').click();
让一打开秋叶网络博客就展开左侧栏吧://netblog.cn?jscode=$('.icon-celan').click();
复制以上三个链接到新窗口打开试试吧,配合社会化分享功能简直perfect!哈哈