关于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. Python——4Dict和Set类型

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

  2. js笔记系列之--时间及时间戳

    js入门系列之 时间及时间戳 时间及时间戳 时间及时间戳是js里面很常见的一个概念,在我们写前端页面的时候,经常会遇到需要获取当前时间的情况,所以,了解js中的时间概念非常重要.而时间戳是指格林威治时 ...

  3. js判断PC端还是移动端的代码小坑

    我在写官网的时候做了pc和移动端两个,在通过网上查找了这样的代码,看着完全没问题,等放进去页面中后,PC端页面一直刷新,根本停不下来,找了类似js还是同样的问题.通过不断尝试后才发现,问题就是多了一行 ...

  4. vue.js 中使用(...)运算符报错

    今天在起别人项目的时候, 发现报错. 这个错误是,项目中不识别es6的扩展运算符, 解决方式很简单. // 第一步 cnpm install babel-plugin-transform-object ...

  5. node生成excel,动态替换表格内容

    这里使用的是exceljs模块, 好上手,易操作 1. 大致使用步骤 npm install exceljs // 引用var Excel = require('exceljs'); // 创建一个w ...

  6. 峰哥说技术:06-手撸Spring Boot自定义启动器,解密Spring Boot自动化配置原理

    Spring Boot深度课程系列 峰哥说技术—2020庚子年重磅推出.战胜病毒.我们在行动 06  峰哥说技术:手撸Spring Boot自定义启动器,解密Spring Boot自动化配置原理 Sp ...

  7. java CRC16 算法

    代码摘自:https://www.cnblogs.com/lujiannt/p/9246256.html 1.CRC16算法 public class CRC16Util { /** * 计算CRC1 ...

  8. springcloud项目实现自定义权限注解进行接口权限验证

    一般在项目开发中会根据登录人员的权限大小对接口也会设置权限,那么对接口权限是怎么实现的呢,大多数都是用自定义权限注解,只需要在接口上加上一个注解就可以实现对接口的权限拦截,是否对该接口有权调用 接下来 ...

  9. Map - 与君初相识

    前言 生活中,我们常会看到这样一种集合:IP地址与主机名,身份证号与个人等,这种一 一对应的关系,就叫做映射.Java提供了专门的集合类用来存放这种对应关系的对象,即 java.util.Map 接口 ...

  10. OpenGL 实践之贝塞尔曲线绘制

    说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...