使用Map标签指定点击区域时的兼容性问题

更新日期: 2018-05-21阅读量: 1713标签: 标签

电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页。听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做。


简单说下做法:
我们首先会和后台约定一些规则,定义一个json对象。比如:

{
    type: 1,
    width: 100,
    height: 100,
    clickArea: [
        {
            shape: 'circle',
            coords: '10,10,10',
            href: '//jd.com'
        },
        {
            shape: 'rect',
            coords: '10,10,10,10',
            href: '//m.jd.com'
        }
    ],
    img: '一张图片.jpg'
}

我们可以约定,type为1就是map标签。之后按照我们约定的解析规则,把页面渲染上去就好了。
当然,实际上不会这么简单,一般来说,我们的首页和活动页是三端同步的。Android和iOS就不能直接使用上面的例子,还需要做一定的修改,但是大同小异。
这次出问题的地方就在这个map标签。


我们使用了模板来渲染页面,之后出来的元素大概是这样。

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

在chrome中可以正常点击,一旦到了其他浏览器,诸如FireFox,则无法点击。
同事问到我这个问题的时候,我真是觉得十分有趣,当时一起寻找是哪里的问题。
中间想了很多种可能,思路一直停留在动态计算影响了map的使用等。但是一直不能复现,后来仔细观察之后才发现,原来是img标签在书写的过程中,漏掉了usemap里的#。

咳咳咳……
在chrome中好使,是因为chrome帮我们做了兼容。

把这个bug记录下来,也算是长长记性。


PS:
后来我查了一下,之所以同事会出这个问题,也是因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。
当然,label和map中的用法也不同,不论如何,引以为戒。

来源:https://www.cnblogs.com/liuyongjia/archive/2018/05/20/9064414.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/788

html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

浏览器是如何将标签转成 DOM ?

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分;浏览器引擎- 用来查询及操作渲染引擎的接口

总结那些有默认margin,padding值的html标签

h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值

用css设置a标签无效,让链接跳转失效

这个代码有个坑,就是如果a标签里面放了一个图片,然后给a标签设置这个样式,这个时候是不起效果的,只能在a标签外面包一个div,然后给div设置这个样式

前端html标签:块级元素,行内元素,空元素

html标签定义:是由一对尖括号包裹的单词构成,例如: <html>.标签不区分大小写<html> 和 <HTML>, 推荐使用小写.标签分为两部分: 开始标签<html> 和 结束标签</html>, 两个标签之间的部分我们叫做标签体

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

a标签中防止跳转的href=javascript:;、void(0);等都是什么意思

a标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行

html的title和alt的区别

alt标签是html标签的属性,而title即使标签,又是标签的属性。 当title作为属性时,用来为元素提供额外的说明信息。当鼠标移入变迁内会显示title的内容,以达到补充说明或提示的效果。

你不一定知道的head标签

现在我将详解head标签和它六个子标签的属性和作用,请耐心看完,会有很大的收获哦!文档的头部经常会包含一些 meta 标签,用来告诉浏览器关于文档的附加信息。在将来,创作者可能会利用预先定义好的标准文档的元数据配置文件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!