JavaScript: top對象

時間 2019-11-08

原文原文鏈接

通常的JS書裏都會在講框架集的時候講top，這會讓人誤解，認爲top對象只是表明框架集，其實top的含義應該是說瀏覽器直接包含的那一個頁面對象，也就是說若是你有一個頁面被其餘頁面以iframe的方式包含了，不管包含的層級是什麼，均可以用top訪問最外層的哪個頁面，由於這個頁面被瀏覽器直接包含，這個事情的意義在於若是多個頁面被同時加載，他們之間須要通訊，就徹底能夠在最外層的頁面設置一個通訊對象，其餘頁面都經過這個對象進行通訊（須要說明的是,若是要這麼幹，須要將他們部署在服務器上進行測試，僅僅在文件系統上測試，可能由於跨域而測試失敗)javascript

測試：html

chorme瀏覽器，apache2服務器，原生js, index.html包含a.html; a.html包含b.html, b.html包含c.html; c.html經過top對象訪問index.html定義的函數以及頁面元素java

index.htmlapache

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iframe</title>
</head>
<body>
index.html
<div id="panel"></div>
<iframe src="a.html"></iframe>
<script language="javascript">
function showMessage()
{
    alert("hello")
}

o = new Object();
o.showMessage = showMessage;
</script>
</body>
</html>

c.html跨域

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iframe</title>
</head>
<body>
c.html
<input type="button" value="click me" onclick="show()" ></input>
<script language="javascript">
function show()
{
    window.top.o.showMessage();
}

</script>
</body>
</html>

top對象是window對象的子對象，若是要訪問頁面元素，能夠這樣寫：瀏覽器

function show()
{
    o = window.top.document.getElementById("panel");
    o.innerHTML = "hello";
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。