第五章 javascript编程可养成的好习惯
2024-08-27 17:55:39
用户点击某个链接时弹出一个新窗口
javascript使用window对象的open()方法来创建新的浏览器窗口,这个方法有三个参数:
window.open(url,name,features)
url:新窗口地址,如果省略,则弹出空白窗口
name:新窗口的名字
features:新窗口的属性。
比如:
function open_url(url){
window.open(url,"new-window","width:320,height:480");
}
用 “javascript:” 伪协议来调用上面那个函数。(“javascript:” 伪协议让我们可以通过一个链接来调用javascript函数)
<body>
<a href="javascript:open_url('http://www.baidu.com');">百度</a>
<script type="text/javascript">
function open_url(url){
window.open(url,"new-window","width:320,height:480");
}
</script>
</body>
用onclick事件处理函数作为属性 嵌入<a>标签
<a href="#" onclick="open_url('http://www.baidu.com');return false;">百度2</a>
<script type="text/javascript">
function open_url(url){
window.open(url,"new-window","width:320,height:480");
}
</script>
上面两种方法没有预留退路,如果用户禁用浏览器的javascript1功能,这样的链接就没用处了。
预留退路就是说,虽然在遇到不支持js的浏览器或者用户禁用js这类障碍某些功能无法使用,但最基本的操作仍能顺利完成。
<!-- 预留退路的做法-->
<a href="http://www.baidu.com" onclick="open_url('http://www.baidu.com'); return false">百度3</a> <!--预留退路的简化版-->
<a href="http://www.baidu.com" onclick="open_url(this.getAttribute('href'); return false">百度4</a> <!--预留退路的最简化版-->
<a href="http://www.baidu.com" onclick="open_url(this.href); return false">百度4</a> <!--由DOM提供的this.href属性-->
现在即使javascript已被禁用这个链接也是可用的。
行为和结构分离开:
<a href="http://www.baidu.com" class="link">百度5</a> <script type="text/javascript">
function open_url(url){
window.open(url,"new-window","width:320,height:480");
} window.onload = prepareLinks;
function prepareLinks(){
var links=document.getElementsByTagName('a');
for (var i=0; i<links.length; i++){
if (links[i].getAttribute('class') == 'link'){
links[i].onclick = function(){
open_url(this.getAttribute('href'));
return false;
}
}
}
}
</script>
最新文章
- 小记:目标数组的长度不够。请检查 destIndex 和长度以及数组的下限。
- 对java多线程的认识
- Hudson(Jenkins)持续集成插件开发环境搭建
- 使用EntityFramwork[6.1]进行级联保存的时候出现异常
- 重复点击主界面(TabBar)按钮刷新界面--点击状态栏回到顶部
- MIFARE系列7《安全性》
- 【BZOJ】【2565】最长双回文串
- jquery json遍历和动态绑定事件
- [ASP.NET 技术点滴] Jquery 前端验证
- 连续改变Chrome浏览器窗口大小,可以导致内存泄漏
- 第四章 Linux环境
- Android 获得各处图片的方法
- Scheme-CPS
- treeview自动从表中添加标题和列值做目录的方法2
- (转) Unicode(UTF-8, UTF-16)令人混淆的概念
- JavaScript(第二十八天)【Cookie与存储】
- Android4.4.2KK竖屏强制更改为横屏的初步简略方案
- 利用XPT2046制作一个电位器AD转换装置
- 自定义事件——Event和CustomEvent
- AIM Tech Round 4 (Div. 1) C - Upgrading Tree 构造 + 树的重心
热门文章
- LeetCode.11-装水最多的容器(Container With Most Water)
- MySQL 逻辑备份mysqldump&;mysqlpump&;mydumper原理解析
- 让你的IDEA倍爽
- thinkphp5.1控制器初始化函数initialize与构造函数__construct区别
- CSS之flex兼容
- BZOJ 1924 &;&; Luogu P2403 [SDOI2010]所驼门王的宝藏 恶心建图+缩点DP
- 【ACM】孪生素数问题
- Table AUD$
- GraphQL实战经验和性能问题的解决方案
- Practice encryptedblobstore