当前位置:首页 »“秋了秋”个人博客 » 前端编程 » URL网址里面执行JavaScript代码

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!哈哈

7
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/444.html
目录: 前端编程标签: URL脚本 11326次阅读

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里