iKuai爱快流控路由

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 16276|回复: 52
打印 上一主题 下一主题

JS代码效果:右下角图片弹窗、双列图片展示

[复制链接]
跳转到指定楼层
楼主
发表于 2015-1-9 18:46:05 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
提示: 作者被禁止或删除 内容自动屏蔽
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏23 支持支持 反对反对
推荐
发表于 2015-1-10 00:23:52 | 只看该作者
本帖最后由 9622315 于 2015-1-10 12:14 编辑

虽然10年没做JS了,但是我还是一眼就看出来你的代码有问题
运行后,write()方法插入页面的代码如下

  1. <div id="ad_right" style="width: 300px; height: 200px; right: 1px; bottom: 1px; position: fixed; z-index: 10001;">
  2. <adocument.getelementbyid('ad_right').style.display='none' style="top: -14px; right: 0px; font-size: 12px; position: absolute;" href="javascript:void(0);">
  3. 关闭
  4. <a href="http://www.baidu.com/"><img style="width: 300px; height: 200px;" src="http://a.hiphotos.baidu.com/image/h=360/sign=564166e4d3160924c325a41de406359b/a08b87d6277f9e2fe7b41cba1c30e924b999f3fb.jpg" /></a>
  5. </adocument.getelementbyid('ad_right').style.display='none'></div>
复制代码

你看看,存在以下问题
1 根本不存在adocument对象,我猜a后面应该有个空格,也就是
  1. <a document.getelementbyid('ad_right')...后面略
复制代码
  1. </a document.getelementbyid('ad_right')...后面略
复制代码


2 还是上面的问题,如果这样修改的话,对象名称是没错了,但是又出现了新问题,脚本指令插入到了html标记中了,标准规范中,这应该是不被允许的。
另外,从代码中,我也没有看出来
  1. adocument.getelementbyid('ad_right').style.display='none'
复制代码

用意,这行代码,执行的操作是隐藏你插入的广告,但实际上根本就没有执行代码,因为“adocument”作为不可识别标记,被忽略了

3 如果按照问题1中的修改方法,还会引出另一个问题,就是
  1. <a></a>
复制代码
标记嵌套了,这也是不被允许的,连接中还要定义新的连接,这逻辑上说不通的。


不要随便抄过一些代码,就贴到论坛里,不好的,即便运行能通过,潜在的错误,是无法保证代码的兼容度的,你的浏览器OK,别人的不一定OK。

真真终于换头像了,还是这个好看。

仔细核对了附件中的代码,附件中的没有错误,看来是你发帖时出错了。


今天又发现个新问题,你的样例中存在BUG,具体的讲就是你的样例中,是通过元素ID来引用元素对象,并修改其属性,完成关闭插入广告的功能,但这就潜在的存在一个问题,

即,理论上你不可能命名一个绝不可能重名的对象,换句话说,你给插入广告对象命名“ad_right”,是存在可能与页面内已有元素重名的可能性的,不管你如何修改命名规则,这个可能性都是存在的,只是几率大小不同罢了。

如果出现重名的情况,你样例中的引用方法,默认是对第一个出现此名称的对象的引用,并进行相应操作,如果此对象是页面内原有对象,也就是此对象不是你的插入广告,则你不但不能完成关闭广告的操作,反而会关闭页面内已有元素显示,破坏原有网页排版。即便你的出入广告是以这个名称最先出现元素,不影响你对其进行关闭的修改操作,但会造成,页内原有脚本对此名称对象修改时,修改的不是原有元素对象,而是修改你的插入广告,这也是不可以的,也就是说如果出现与插入广告同ID名称的元素时,不是你的广告脚本运行不正常,就是原有页面相应的脚本运行不正常。

正确的方法是,不给插入广告命名,采用DHTML内建元素对象的引用机制,来完成对元素属性的修改操作,具体修改如下:


  1. <div id='ad_right' 后面略
复制代码

中的
  1. id='ad_right'
复制代码

去掉,即删除掉


  1. document.getElementById(\'ad_right\').style.display
复制代码

修改为
  1. this.parentNode.style.display
复制代码



原理分析
样例中的代码是通过getElementById()方法,返回第一个命名为“ad_right”的元素,并完成对其进行相应的属性修改操作,
修改后的代码是通过当前的本级元素对象(this)的parentNode属性,间接引用父级元素对象,并对其进行相应的属性修改操作,

this是JavaScript的保留字,表示对当先操作的html元素对象的引用,通过它来完成对父级元素对象的操作,不需要给父级元素对象命名,也就不会出现页面内元素对象重名的现象了。


10年不code了,想不到,俺宝刀不老,又找回当年全公司coder达人的感觉了,意淫自恋一下,哈哈哈哈。

沙发
发表于 2015-1-9 18:46:38 | 只看该作者
为啥都用这只猫。。。
板凳
发表于 2015-1-9 18:47:27 | 只看该作者
比较关心这个图片上传出处,到时候自己上传修改
地板
发表于 2015-1-9 18:47:37 | 只看该作者
那猫是我的····
我爱上度娘 才养的猫
5#
发表于 2015-1-9 18:48:47 | 只看该作者
明明不是猫是个女女
6#
发表于 2015-1-9 18:50:37 | 只看该作者
7#
发表于 2015-1-9 18:51:29 | 只看该作者
新手不能上传附件啊
8#
发表于 2015-1-9 18:57:01 | 只看该作者
猫在这 JS文本文档 (2).rar (450 Bytes, 下载次数: 123)
9#
 楼主| 发表于 2015-1-9 18:59:09 | 只看该作者
提示: 作者被禁止或删除 内容自动屏蔽
10#
 楼主| 发表于 2015-1-9 18:59:27 | 只看该作者
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|小黑屋|手机版|Archiver|论坛规章制度|iKuai Inc. ( 京ICP备13042604号 )

GMT+8, 2024-11-11 08:07

Powered by Discuz! X3.3

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表