关于js中"window.location.href"、"location.href"、"parent.location.href"、"top.location.href"的用法

A页面:<iframe src="b.html" frameborder="0"></iframe>
B页面:<iframe src="c.html" frameborder="0"></iframe>
C页面:<iframe src="d.html" frameborder="0"></iframe>
D页面:d.html

可以再 d.html 这样写: a>b>c>d.html
"window.location.href"、"location.href":D页面跳转  获取D的地址
"parent.location.href":C页面跳转 获取C的地址
"top.location.href":A页面跳转 获取A的地址

如果D页面中有form的话,
<form>: form提交后D页面跳转
<form target="_blank">: form提交后 弹出新页面
<form target="_parent">: form提交后 C页面跳转
<form target="_top"> : form提交后 A页面跳转

"parent.location.reload();": C页面刷新 (
可以使用子窗口的 opener 对象来获得父窗口的对象:window.opener.document.location.reload(); )
"top.location.reload();": A页面刷新

要是 iframe想调用父级方法:

// 先通过window.parent获取到父元素,在调用该对象上的方法

window.parent.sayHello();

// 或者jquery

$(window.parent)[0].sayHello();

  

要是 父级查找iframe 里面方法:

// 先获取到子页面的window对象,然后在调用
window.onload = function() {
var ifra = document.getElementById("ifra");
ifra.contentWindow.sayName();
}

  

要是  父级查找 iframe  里面元素:

// 在标签上添加onload事件
<iframe id="ifra" onload="getIframe()" name="myifra" src="iframe2.html" width="400" height="400"></iframe> // 原生js获取
function getIframe() {
var ifra = document.getElementById("ifra");
console.log(ifra.contentWindow.document.getElementById("btn"));
} // jquery获取 function getIframe() {
console.log($('#ifra').contents().find("#btn")[0]);
}

关于js中iframe 中 location.href的用法的更多相关文章

  1. 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别(跳出iframe方法)

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  2. 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  3. js中location.href的用法

    Javascript中的location.href有很多种用法,主要如下: self.location.href="/url" 当前页面打开URL页面 ocation.href=& ...

  4. 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)

    问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...

  5. springMVC框架在js中使用window.location.href请求url时IE不兼容问题解决

    是使用springMVC框架时,有时候需要在js中使用window.location.href来请求url,比如下面的路径: window.location.href = 'forecast/down ...

  6. javascript 中设置window.location.href跳转无效问题解决办法

    javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在wi ...

  7. js打印Iframe中的内容,并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

  8. window.location.href的用法

    在写ASP.Net程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect 做ASP.NET框架页跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Respon ...

  9. [转载]window.location.href的用法(动态输出跳转)

    无论在静态页面还是动态输出页面中window.location.href都是不错的用了跳转的实现方案   javascript中的location.href有很多种用法,主要如下. self.loca ...

随机推荐

  1. diary20180428

    17:05:59 今天早晨去了图书馆.学习了一把vscode.试图在河边看电脑,总有小虫不让我专心. 23:27:34 看纯黑直播打战神,有点感触. 动漫或游戏,角色觉醒,实力大增,小时候(甚至现在) ...

  2. 5——PHP逻辑运算符&&唯一的三元运算符

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  3. 解决Request中参数中文乱码问题

    1.使用配置过滤器的方式解决 在web.xml中增加过滤器: <!--配置解决中文乱码的过滤器--> <filter> <filter-name>character ...

  4. 【阿里云IoT+YF3300】16.云端一体化,天猫精灵操控YF3300

    “你好天猫精灵”,“主人有什么吩咐”,“打开灯”,“好的,灯已打开”.对于这样的对话应该大多数人都很熟悉,这就是智能家居的缩影.对于现在市面上层出不穷的智能家居系统,功能越来越繁杂,可是因为开发难度高 ...

  5. SSRF漏洞的挖掘思路与技巧

    什么是SSRF? SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法 ...

  6. CVE-2019-0708 远程桌面漏洞复现

    漏洞影响Windows版本: Windows XP SP3 x86Windows XP Professional x64 Edition SP2Windows XP Embedded SP3 x86W ...

  7. Java中如何更优雅的处理空值

    经常看到项目中存在到处空值判断的情况,这些判断,会让人觉得摸不着头绪,它的出现很有可能和当前的业务逻辑并没有关系.但它会让你很头疼.有时候,更可怕的是系统因为这些空值的情况,会抛出空指针异常,导致业务 ...

  8. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  9. 适配iphoneX

    tips iphone6设备宽高为375×667,屏幕分辨率为750×1334,故其设备像素比(dpr)为2.iphoneX的设备宽高375*812,屏幕分辨率为1125x2436,故dpr=3 适配 ...

  10. ubuntu下载eclipse详细步骤

    1.官网下载 Eclipse IDE for Java EE Developers: https://www.eclipse.org/downloads/packages/ 2.安装eclipse将其 ...