"parent.location.href美高梅赌堵59599:"是上一层页面跳转,复制代码 代码如下

2019-11-26 作者:美高梅-运维   |   浏览(111)

首先,我们来做个实验吧。 打开任何一个浏览器的空页,在地址输入栏中输入以下代码: 复制代码 代码如下: javascript:void; 会发生什么呢? 答案是什么都不会发生。 然后,我们再打开一个浏览器的空页面,在地址栏中输入以下代码: 复制代码 代码如下: javascript:function test(){return "hello";};test(); 这样又会发生什么呢,是什么都不会发生么? 显然不是,我们得到的是一个新的页面,而且页面的内容是JS代码返回的值; 为什么会这样? 因为在浏览器解析JS的时候,如果有返回值,那么就会生成一个新的页面,如果没有就什么都不做。 这就是为什么上面的两个例子有这种差别。 好了,那入正题。 先来看下两段很相似的代码 复制代码 代码如下: hyperlink 复制代码 代码如下: hyperlink2 然后,我们把这两断代码放到同一个页面中,依次点击他们。 貌似没有发生什么,是不是这样就可以说他们是等效的了呢? 那么我们再来看一段代码 复制代码 代码如下:

一、JS打开新窗口的2种方式

  1. 超链接
<a href="http://www.jb51.net" title="脚本之家">Welcome</a>

等效于js代码

window.location.href="http://www.jb51.net";     //在同当前窗口中打开窗口
  1. 超链接
<a href="http://www.jb51.net" title="脚本之家" target="_blank">Welcome</a>

等效于js代码

window.open("http://www.jb51.net");                 //在另外新建窗口中打开窗口

window.opener在js中是打开新窗口,下面我来给各位同学详细介绍关于window.opener一些使用方法与总结,各位朋友可进入参考。

今天总结一下js中几个对象的区别和用法:
首先来说说 parent.window与top.window的用法
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举例说明:
如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写
"window.location.href"、"location.href":D页面跳转
"parent.location.href":C页面跳转
"top.location.href":A页面跳转
现在终于明白了连接的时候target的用法了:
_blank:重新打开一个窗口
_parent:父窗口执行重定向
_self:自身页面重定向
_top:第一个父窗口重定向
综上所述可知:parent.window:父窗口对象 top.window:第一个父窗口的对象
下面来重点看看window.parent与window.openner区别
window.parent 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取;
例子如下:
A.html
复制代码 代码如下:
<html>
<head>
<title>父页面</title>
</head>
<body>
<form id="form1" action="">
<div>
输入值:
<input type="text" name="username" id="username" /><br />
<iframe src="b.html" width="400px" height="300px"></iframe>
</div>
</form>
</body>
</html>

1. 先说说target属性

target属性规定在何处打开超链接,取值有如下几种:
_blank
浏览器在一个新打开、未命名的窗口打开文档
_self
当前窗口打开文档,没有target属性时的默认操作
_top
清除所有包含的框架,将文档载入整个浏览器窗口
_parent
将文档载入父窗口,如果引用是在父窗口或者顶级框架,与_self等效

New Document

二、a标签中调用js的几种方法

我们常用的在a标签中有点击事件:

1. a href="JavaScript:js_method();"

这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2. a href="javascript:void(0);" onclick="js_method()"

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3. a href="javascript:;" onclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4. a href="#" onclick="js_method()"

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5. a href="#" onclick="js_method();return false;"

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。
综合上述,在a中调用js函数最适当的方法推荐使用:

<a href="javascript:void(0);" onclick="js_method()">Welcome</a>
<a href="javascript:;" onclick="js_method()">Welcome</a>
<a href="#" onclick="js_method();return false;">Welcome</a>

js的方法中 字符串型要加引号

以前一直认为window.opener只有在window.open方法打开下的窗口才可以访问,没想到即使是a链接打开的页面的照样可以访问。window.opener指向父窗口,也就是来源窗口。可以利用window.opener获取来源页面location.href信息等,也可以操作来源 页面的DOM,十分强大

B.html
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
function getpValue()
{
document.getElementByIdx_x_x_x("span1").innerText=window.parent.document.getElementByIdx_x_x_x("username").value;
}
</script>
</head>
<body>
<span>文本框值为:</span><span id="span1"></span><br />
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();">
</body>
</html>

2.Href的取值

来自菜鸟网络对a标签href的可能值:

超链接的 URL。可能的值:
1.绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")
2.相对 URL - 指向站点内的某个文件(href="index.htm")
3.锚 URL - 指向页面中的锚(href="#abc")// abc为页面中某个元素的id或 者name,href=‘#’即默认锚#top,跳转到顶部但不刷新页面

此外,href的取值可能还有:
1.href = 'mailto:xxxxx' 打开邮件客户端发送邮件
> 发送邮件:<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
发送复杂邮件:<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送复杂邮件!</a>

注意:使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。

2.href = 'javascript:;' 或者 href = 'javascript:void(0)' 或者 href = 'javascript:void()'
死链接点击没有任何反应,个人理解禁用a标签的默认跳转行为。
<a href="javascript;" onclick=“func()”>

3.href = 'javascript:history.xxxx;' 用于返回上一页,下一页等
><a href="javascript:history.go(-1);">向上一页</a>
><a href="javascript:history.back();">返回上一页</a>
><a href="javascript:history.foward();">向下一页</a>
>图片或者按钮
><button onclick="javascript:history.back();">返回上一页</button>
history的三个方法:go() back() forward()
back() 加载到前一个页面
back() 加载到下一个页面
go() 加载到具体的页面 1向后加载 -1向前加载

4.href=“javascript:window.opener=null;window.close();” 关闭当前页面

关于a标签的总结暂时这么多,后面想到了再更,有错误之处还望指出。

本文由美高梅赌堵59599发布于美高梅-运维,转载请注明出处:"parent.location.href美高梅赌堵59599:"是上一层页面跳转,复制代码 代码如下

关键词:

  • 上一篇:没有了
  • 下一篇:没有了