关于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. 一起了解 .Net Foundation 项目 No.8

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. IdentityModel ...

  2. github浏览器无法访问,并且idea无法push项目

    github浏览器无法访问,并且idea无法push项目 原因:前一晚还能正常访问github,今天就无法提交项目了.前一步的操作为删库,然后改库.估计是因为dns出现了问题,具体问题不知道. 网上一 ...

  3. Python安装3 —— Python3.8和2.7共存

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12400896.html 一:Python解释器为什么要2个版本? 众所周知,Py ...

  4. Javascript学习笔记-基本概念-语句

    1.if语句 if (condition) statement1 else statement2 也可以像下面这样把整个if 语句写在一行代码中: if (condition1) statement1 ...

  5. C与ARM汇编结合实现mini2440串口uart简单程序

    最近学完了ARM的一些基础知识,开始在mini2440上开发一些简单的程序,串口发送程序是一开始涉及多个寄存器的例子,稍有繁多的步骤应该是开发过程中要慢慢适应的境况 下面的程序的目的是实现mini24 ...

  6. ArrayBuffer转base64详解

    先贴代码: const base64String = window.btoa(String.fromCharCode(... new Uint8Array(buffer))) 看起来非常的简洁,优美. ...

  7. 【CSS3】自定义设置可编辑元素闪烁光标的颜色

    前言 因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法, 需要通过平时的基础积累和经验. 解决方案 使用 ::first-line 伪元素 ...

  8. deepin中安装pycharm过程

    安装过程真的超级简单!一遍就会! 1.下载pycharm(下载地址):https://www.jetbrains.com/pycharm/ 2.在网址中找到对应的版本:在deepin中选择linux版 ...

  9. flask连接mysql出现ModuleNotFoundError: No module named 'MySQLdb'

    只需在配置SQLALCHEMY_DATABASE_URI时,加上pymysql就可以了:  app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql ...

  10. Vuex的理解以及它的辅助函数

    理解:vue中的“单向数据流”,这里借用官网的图示: Vue是单向数据流,v-model只是语法糖而已.单向数据流就是:数据总是[向下传递]从父级组件传递给子组件,只能单向绑定.子组件内部不能直接修改 ...