本文介绍了JavaScript实现的网页特效，包括打开新窗口、指定窗口大小、父子窗口数据交互、页面刷新、屏蔽鼠标右键、上下文菜单、复制功能以及键盘功能键，还讲解了如何防止网页被iframe框架引用。
打开新网页
实现以下功能：
打开新网页可以使用<a>、open()、javascript:open
- 在当前页打开一个新的网页（会替换掉这个网页）：<a>
- 重新在另一个页面中打开： <a href="open.html" target="_blank">打开新页面(target="_blank")</a><br><br> 或者 window.open(url)
<div id="id-div-center" style="">
<a href="open.html">打开新页面</a><br><br>
<a href="open.html" target="_blank">打开新页面(target="_blank")</a><br><br>
<a onclick="window.open('open.html')">打开新页面(window.open)</a><br><br>
<input type="button"
value="打开一个新的窗口(window.open)"
onclick="window.open('open.html')"/><br><br>
<input type="button"
value="打开一个新的窗口(function)"
onclick="openNewHtml('open.html')"/><br><br>
<a href="javascript:openNewHtml('open.html')">打开新页面(javascript:function)</a><br><br>
</div>
</body>
<script type="text/javascript">
function openNewHtml(url) {
window.open(url);
}
</script>
打开指定大小的窗口
使用open() 方法打开指定新窗口的大小尺寸。
知识点：window.open(url, '', 'width=' + w + ',height=' + h);
<div id="id-div-center" style="">
指定新窗口大小: <br><br>
Width: <input type="text" id="id-window-width" value="">
Height: <input type="text" id="id-window-height" value=""><br><br>
<input type="button" value="打开指定大小的窗口"
onclick="openNewHtml('open.html')"/><br><br>
</div>
</body>
<script type="text/javascript">
function openNewHtml(url) {
var w, h;
w = document.getElementById('id-window-width').value;
if(w == 0)
w = 100;
h = document.getElementById('id-window-height').value;
if(h == 0)
h = 100;
window.open(url, '', 'width=' + w + ',height=' + h);
}
</script>
获取打开子窗口的父窗口
当网站中子窗口和父窗口关系复杂，怎么理清窗口之间的关系？
用到windows对象的opener属性。该属性标识创建当前子窗口的window对象引用（简单说就是标识当前子窗口的父窗口）
创建两个页面，一个父窗口页面，一个子窗口页面。
父窗口页面方法：
使用Location对象的href属性获取了当前页面（父窗口）的地址，
然后通过window对象的open方法打开新页面（子窗口），该方法的返回值保存在变量（subWin）中。
最后通过变量（subWin）调用opener属性。获取了变量（subWin）所代表窗口的地址。
<body>
<div id="id-div-center" style="">
<!-- 写一个打开子窗口的按钮 并定义一个打开新窗口的事件-->
<input type="button" value="打开子窗口" onclick="openNewWindow('ch09-js-html-sub.html')" /><br><br>
<span id="id-span-parent "></span>
</div>
</body>
<script type="text/javascript">
/**
* open new html
* @param url
*/
function openNewWindow(url) {
// 1、使用Location对象的href属性获取了当前页面（父窗口）的地址
var curUrl = window.location.href.split('?')[0];
document.getElementById('id-span-parent').innerHTML += "Current url: " + curUrl + "<br>";
// 通过window对象的open方法打开新页面（子窗口），该方法的返回值保存在变量（subWin）中。
var subWin = window.open(url);
// 通过变量（subWin）调用opener属性。获取了变量（subWin）所代表窗口的地址。
var winUrl = subWin.opener.location.href.split('?')[0];
document.getElementById('id-span-parent').innerHTML += "Return url: " + winUrl + "<br>";
}
</script>
子窗口页面方法：
使用Location对象的href属性读取了当前页面（子窗口）地址，
通过window对象的opener属性，获取父窗口页面地址。
<body>
<div id="id-div-center" style="">
<span id="id-span-sub"></span>
</div>
</body>
<script type="text/javascript">
/**
* window onload - set date on title bar
*/
window.onload = function() {
// 使用location对象的href属性读取了当前页面（子窗口）地址，
var curUrl = window.location.href.split('?')[0];
document.getElementById('id-span-sub').innerHTML += "Current url: " + curUrl + "<br>";
// 通过window对象的opener属性，获取父窗口页面地址
var openerHref = window.opener.location.href.split('?')[0];
document.getElementById('id-span-sub').innerHTML += "opener url: " + openerHref + "<br>";
};
</script>
父子窗口之间数据交互
之前了解到的窗口之间数据传输是通过url传参。现在讲的父子窗口传递的数据，方法主要写在子窗口里，
是使用 window的opener 来交互：
var openerVal = window.opener.document.getElementById('父窗口input的id').value;//在子窗口中获取父窗口的值
document.getElementById('id-span-sub').innerHTML += "opener value: " + openerVal + "<br>";//在子窗口中把显现出来
window.opener.document.getElementById('id-input-user').value = vReturnData;//在子窗口中把值发给父窗口
效果图：
父窗口：
<div id="id-div-center" style="">
<label for="id-input-user">用户数据: </label><input type="text" id="id-input-user"><br><br>
<input type="button" value="打开子窗口" onclick="openSubWindow('ch09-js-html-sub-sdata.html')"/><br><br>
<span id="id-span-parent"></span>
</div>
</body>
<script type="text/javascript">
/**
* open sub window
* @param url
*/
function openSubWindow(url) {
var subWin = window.open(url);
}
</script>
子窗口：
<div id="id-div-center" style="">
<span id="id-span-sub"></span><br>
<label for="id-input-return">回传数据: </label><input type="text" id="id-input-return"><br><br>
<input type="button" value="回传数据" onclick="returnData('id-input-return')"/><br><br>
</div>
</body>
<script type="text/javascript">
/**
* window onload - set date on title bar
*/
window.onload = function () {
// id-input-user是在父窗口定义的输入框id 大功臣是 opener
// 获取父窗口中输入框的值
var openerVal = window.opener.document.getElementById('id-input-user').value;
// 父窗口返回的数据放到这里
document.getElementById('id-span-sub').innerHTML += "opener value: " + openerVal + "<br>";
};
/**
* return data
* @param id
*/
function returnData(id) {
var vReturnData = document.getElementById(id).value;
window.opener.document.getElementById('id-input-user').value = vReturnData;
}
</script>
刷新当前页面
使用js实现刷新操作。
在location对象中定义reload()方法，用于加载当前页面。
手动刷新：定义一个方法，在方法里用 window.location.reload();
自动刷新：在方法里定义一个计时器，计时器里面同样用到window.location.reload();
<div id="id-div-center" style="">
<input type="button" value="人工方式刷新页面" onclick="refreshManual()"/>
<input type="button" value="自动刷新页面" onclick="refreshAuto()"/><br>
</div>
</body>
<script type="text/javascript">
/**
* manual refresh
*/
function refreshManual() {
var log = "manual refresh log : ";
window.location.reload();
var mdate = new Date();
log += mdate.toLocaleString();
console.log(log);
}
// TODO: define timer variables
var timer = null;
clearInterval(timer);
/**
* auto refresh
*/
function refreshAuto() {
var log = "init log : ";
var pdate = new Date();
log += pdate.toLocaleString() + "\n";
console.log(log);
timer = self.setTimeout(function () { // TODO: setTimeout
window.location.reload();
var adate = new Date();
log += "auto refresh log : " + adate.toLocaleString() + "\n";
console.log(log);
clearTimeout(timer);
}, 3000);
}
</script>
屏蔽鼠标右键
通过判断Event对象的button属性值是否为2（指代鼠标右键）来监测屏蔽鼠标右键的操作。
<div id="id-div-center" style="">
<span>测试点击鼠标右键</span>
</div>
</body>
<script type="text/javascript">
document.onmousedown = function (e) {
// TODO: 判断事件的值是否为鼠标右键
if (e.button == 2) {
alert('禁用鼠标右键!'); // TODO: 提示用户禁用鼠标右键
}
}
</script>
屏蔽上下文菜单
通过设定Event 对象的returnValue属性值为否（false）来实现屏蔽上下文菜单操作。
屏蔽复制功能
通过为oncopy事件方法定义返回值false来实现禁止复制操作。
<body oncopy="alert('禁止复制网页内容!');return false;">
<div id="id-div-center" style=""></div>
</body>
屏蔽选择操作
监听 onselectstart 事件，并返回 false 来实现。
<div id="id-div-center" style="">
<span>测试选择网页内容</span>
</div>
</body>
<script type="text/javascript">
document.onselectstart = function (e) {
e.returnValue = false;
};
</script>
屏蔽键盘功能键(Shift|Alt|Ctrl)
<div id="id-div-center" style="">
</div>
</body>
<script type="text/javascript">
window.onload = function (ev) {
document.onkeydown = function (ev) {
var event = ev || window.event;
if (event.shiftKey) {
alert("禁止按Shift键!");
return false;
} else if (event.ctrlKey) {
alert("禁止按Ctrl键!");
return false;
} else if (event.altKey) {
alert("禁止按Alt键!");
return false;
} else {}
console.log(event.key);
};
};
</script>
防止网页被" frame"
有些无良设计人员喜欢直接嵌套他人页面到自己网站中，而且这样成本非常低。
直接通过<iframe>框架引用目标网址，就可以实现。
为了防止自己的页面被别人frame，可以在页面中嵌入一段js脚本，用于检测当前页面是不是顶层（top）窗口。
如果检测出不是顶层窗口，就通过脚本语言修改过来，这样当别人frame你的网页时，就会自动跳转到你的网页，而不是被对方frame到他们的网页中。
<div id="id-div-center" style="">
<span></span>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
// TODO: 判断有没有frame
if (top.location != self.location) {
alert("网页被‘frame’了!");
top.location = self.location;
} else {
console.log("网页未被‘frame’!");
}
};
</script>
frame测试：
<div id="id-div-center" style="">
<iframe src="ch09-js-html-forbidden-frame.html"></iframe>
</div>
取浏览器窗口尺寸
<div id="id-div-center" style="">
<span id="id-span-window-size"></span>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var s_info = "<b>浏览器窗口尺寸:</b>" + "<br><br>";
// 获取浏览器外部可视化尺寸的方法
var w_outer_size = getWindowOuterSize();
s_info += "window.outerWidth: " + w_outer_size.width + " / " + "window.outerHeight: " + w_outer_size.height + "<br>";
// 获取浏览器内部可视化尺寸的方法
var w_inner_size = getWindowInnerSize();
s_info += "window.innerWidth: " + w_inner_size.width + " / " + "window.innerHeight: " + w_inner_size.height + "<br><br>";
document.getElementById("id-span-window-size").innerHTML = s_info;
};
/**
* get window outer size
* @returns {{width: number, height: number}}
*/
function getWindowOuterSize() {
return {
// 获取浏览器外部可视化尺寸的宽和高
width: window.outerWidth,
height: window.outerHeight
};
}
/**
* get window inner size
* @returns {{width: number, height: number}}
*/
function getWindowInnerSize() {
return {
// 获取浏览器内部可视化尺寸的宽和高
width: window.innerWidth || document.documentElement.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight
};
}
</script>
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
