html a标签包含a标签,浏览器的行为处理
a标签包含a标签
浏览器可能是为了避免a的转跳重复,所以禁止了a标签包含a标签,如何你的代码中有a标签包含a标签,那么浏览器将会重新编码外层a标签,取外层a标签与内层a标签的差集,加上外层a标签,并把外层a标签去掉。这样就会破坏我们的html结构。
因此我编码的时候一定要避免a标签包含a标签
我这次重构代码的时候遇到了这样的代码,但是html结构我并不想修改他的。
我思路是:
一、用div对外层a标签进行模拟
二、用div对内层a标签进行模拟
模拟用的div用点击事件截获,最后创建a标签执行a标签的默认方法
// 这是我对外层a标签进行模拟用的代码
function div_a_click(e){
var target_elem = e.target || e.srcElement;
var a_tag_RegExp = /[^http://|^https:\/\/][\s\S]*/;
while(!(target_elem === this || target_elem.tagName == 'BODY')){
if (target_elem.tagName == 'A' && a_tag_RegExp.test(target_elem.href)) {
return;
}
target_elem = target_elem.parentNode;
}
var a = document.createElement('a');
a.href = this.getAttribute('href');
a.target = target_elem.getAttribute('target');
target_elem.parentNode.appendChild(a);
a.click();
target_elem.parentNode.removeChild(a);
}
html a标签包含a标签,浏览器的行为处理的更多相关文章
- 面试小记---外部脚本必须包含 <script> 标签吗?
外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...
- GZip压缩的js文件IE6下面不能包含<script>标签
IE6下面,GZip压缩的js文件,如果js中包含<script>标签,一遇到这样的标签,后面的内容居然都截断了,狂晕! 花了我一个晚上来找原因.. 需要将字符串'<script&g ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- 解决json包含html标签无法显示的问题
要是在json中包含html标签的话,在js接收数据的时候就会出现问题,导致接收失败. 所以在java端,对json包含有html标签的句子先进行转义. package com.alibaba.int ...
- PHP & Javascript 如何对字符串中包含html标签进行编码 整理
为什么要对字符串编码? 某些字符串中包含html标签,不编码,页面输出就乱了. PHP下怎么对字符串编码? htmlentities vs htmlspecialchars htmlentities ...
- IE浏览器下a标签嵌套img标签默认带有边框
最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!
- 整个Html内容以邮件的方式发送出去(取出标签包含的用户输入信息)
需求是一个html的调查问卷,在调查问卷完成后,将问卷页面(包括用户填写的答案)完整的发送给领导. 问题出现了 填写的时候用的是jquery赋值的方法 ,比如text文本.textrear用的是val ...
- 点击显示子菜单,离开隐藏子菜单(onmouseout下包含a标签的js解决方法)
<div class="menu"> <a href="javascript:void(0);" id="a_all&quo ...
- a标签包含块级元素问题
a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但 ...
随机推荐
- 【JAVA】 Java 连接池的工作原理
什么是连接? 连接,是我们的编程语言与数据库交互的一种方式.我们经常会听到这么一句话“数据库连接很昂贵“. 有人接受这种说法,却不知道它的真正含义.因此,下面我将解释它 ...
- MongoDB-权限配置
启动 Mongo\bin\mongo.exe1.添加>use admin #切换到MongoDB数据库的用户表>db.addUser("Name","Pass ...
- css变形 transform【转】
transition:过度属性 transition-property 规定设置过度效果的css属性的名称,默认可以写all transition-duration 规定完成过度效果需要多少秒或毫秒 ...
- ApplicationContext更强的功能-学习笔记
---恢复内容开始--- 一.国际化支持 二.资源访问 三.事件传递 国际化支持 ApplicationContext继承了org.springframework.context.MessageRes ...
- *HDU1151 二分图
Air Raid Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- easyloader源码
/** * easyloader - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * ...
- linux常用命令(四)
1.压缩解压命令 gzip命令 默认为.gz格式文件 1.只能压缩文件不可压缩目录 2.不保留源文件 压缩 giz 解压 gunip tar命令 -c产生打包文件 -v显示相信打包压缩过程 - ...
- cocos2d-x test学习[1]
controller.cpp std::function<TestScene*()> callback;//一个是返回值,一个是参数.返回值是TestScene*,参数是()里的东西 Co ...
- swfit-计时器
import UIKit class FourVC: UIViewController { var label:UILabel = UILabel() var index : Int = var ti ...
- ExtJS笔记 Field
Fields are used to define what a Model is. They aren't instantiated directly - instead, when we crea ...