快捷導(dǎo)航

淺析location.href跨窗口調(diào)用函數(shù)

更新時間：2016年11月22日 14:15:14 作者：逆心

本文詳細(xì)介紹了location.href跨窗口調(diào)用函數(shù)，具體的使用方法及實(shí)例，有需要的朋友可以參考下

location.href這個東西常常用于跳轉(zhuǎn)，location既是window對象的屬性，又是document對象的屬性。

JavaScript hash 屬性 -- 返回URL中#符號后面的內(nèi)容
JavaScript host 屬性 -- 返回域名
JavaScript hostname 屬性 -- 返回主域名
JavaScript href 屬性 -- 返回當(dāng)前文檔的完整URL或設(shè)置當(dāng)前文檔的URL
JavaScript pathname 屬性 -- 返回URL中域名后的部分
JavaScript port 屬性 -- 返回URL中的端口
JavaScript protocol 屬性 -- 返回URL中的協(xié)議
JavaScript search 屬性 -- 返回URL中的查詢字符串
JavaScript assign() 函數(shù) -- 設(shè)置當(dāng)前文檔的URL
JavaScript replace() 函數(shù) -- 設(shè)置當(dāng)前文檔的URL，并在history對象的地址列表中刪除這個URL
JavaScript reload() 函數(shù) -- 重新載入當(dāng)前文檔
JavaScript toString() 函數(shù) -- 返回location對象href屬性當(dāng)前的值
有幾種不同的調(diào)用方法，弄到自己有點(diǎn)亂，這次一次性寫個實(shí)例，完完全全不再混淆。本次用3個頁面解決問題：

3.html 本窗口：

<html>
<head>
<title>js</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    $("#parent").click(function(){
      parent.location.href = "http://m.fzitv.net/article/97882.htm";  //父親Iframe被跳轉(zhuǎn)
    })
    $("#top").click(function(){
      top.location.href = "http://m.fzitv.net/article/97882.htm";    //爺爺Iframe(最外層)被跳轉(zhuǎn)
    })
    $("#self").click(function(){
      self.location.href = "http://m.fzitv.net/article/97882.htm";    //自己跳轉(zhuǎn)
    })
    $("#parentparent").click(function(){
      parent.parent.location.href = "http://m.fzitv.net/article/97882.htm";  //爺爺IFrame跳轉(zhuǎn),可以獲取到任意層級的父窗口
    })
  })

  function ParentRun()
  {
    alert("兒子IFrame方法!");
  }
</script>
</head>
<body>
我是兒子!
<input type="button" id="parent" value="parent.location.href" />
<input type="button" id="top" value="top.location.href" />
<input type="button" id="self" value="self.location.href" />
<input type="button" id="parentparent" value="parentparent.location.href" />
</body>
</html>

2.html 父窗口：

<html>
<head>
<title>js??</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    $("#Outermost").click(function(){
      //判斷當(dāng)前IFrame是否是最外層頁面
      if (top.location == self.location) {
        alert("本Iframe是最外層框架");
      }
      else{
        alert("本Iframe不是最外層框架");  //這個被彈出
      }
    })

    $("#Son").click(function(){
      //window.frames[0].location = "http://m.fzitv.net/article/97882.htm";
      window.frames["Son"].location = "http://m.fzitv.net/article/97882.htm";
    })

    $("#SonFunction").click(function(){
      window.frames["Son"].ParentRun();  //IE支持,google發(fā)布后)支持(文件系統(tǒng)中不支持)
    })

    $("#ParentFunction").click(function(){
      parent.SonRun();  //IE支持,google發(fā)布后支持(文件系統(tǒng)中不支持)
    })
  })
</script>
</head>
<body>
我是父親!
<iframe src="3.html" name="Son" style="width:300px; height:300px;" ></iframe>
<input type="button" id="Outermost" value="判斷當(dāng)前IFrame是否最外層" />
<input type="button" id="Son" value="控制兒子IFrame跳轉(zhuǎn)" />
<input type="button" id="SonFunction" value="調(diào)用子窗口函數(shù)">
<input type="button" id="ParentFunction" value="調(diào)用父窗口函數(shù)">
</body>
</html>

1.html 爺窗口：

<html>
<head>
<title>js</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    alert(window.location == document.location);  //輸出 true
  })

  function SonRun()
  {
    alert("爺爺IFrame方法!");
  }
  
  //http://localhost:666/1.html?id=1&name=%E5%BC%A0%E4%B8%89#menu
  document.write(location.hash + "<br/>");    //  #menu
  document.write(location.host + "<br/>");    //  localhost:666
  document.write(location.hostname + "<br/>");  //  localhost
  document.write(location.pathname + "<br/>");  //  /1.html
  document.write(location.port + "<br/>");    // 666
  document.write(location.protocol + "<br/>");  // http:
  document.write(location.search + "<br/>");    // ?id=1&name=%E5%BC%A0%E4%B8%89
  document.write(location.assign + "<br/>");    // function () { [native code] }
</script>
</head>
<body>
我是最爺爺(最外層)!
<iframe src="2.html" style="width:500px; height:500px;" ></iframe>
</body>
</html>

　　三個頁面放在同一個目錄，隨便點(diǎn)下就知道怎么回事了!

　　jQuery對IFrame的操作主要是通過

　　$("iframe").contents().find("#id1");

　　進(jìn)行跨IFrame操作。

以上就是本文的全部內(nèi)容，希望對大家有所幫助，謝謝對腳本之家的支持！

您可能感興趣的文章: