zoukankan      html  css  js  c++  java
  • 关于js中iframe 中 location.href的用法

    关于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]);
    }
  • 相关阅读:
    Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
    iframe的坑
    echarts展示
    常量
    变量赋值
    变量声明
    变量初始化
    windows下nvm的安装及使用
    sessionStorage 使用方法
    jquery+ajax获取本地json对应数据
  • 原文地址:https://www.cnblogs.com/zhouhongdan/p/10208118.html
Copyright © 2011-2022 走看看