資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何透過超連結在 JavaScript 中定位特定的框架？
HTML 框架提供了一種方便的方式將瀏覽器視窗劃分為多個部分。
每個部分都可以載入單獨的 HTML 文件。我們可以使用 JavaScript 透過 window 物件的 frames 屬性將內容載入到特定框架中。frames 屬性是一個類似陣列的物件，包含當前頁面上的所有框架（包括 iframe）。
我們可以使用 window.frames[] 屬性將文件內容載入到框架中，方法有很多。讓我們逐一檢視它們 -
1. 使用索引
要定位特定框架，可以使用框架的索引或名稱。例如，要定位頁面上的第一個框架，可以使用以下程式碼 -
window.frames[0].document.location.href = "http://www.example.com"
2. 使用框架名稱
要使用框架名稱定位框架，可以使用以下方法。假設框架的名稱為“frame_name” -
window.frames["frame_name"].document.location.href = "http://www.example.com";
3. 使用 getElementById 和 getElementByName
您還可以使用 getElementById() 或 getElementsByName() 方法定位框架，然後使用 contentWindow 方法訪問框架視窗，如下所示 -
document.getElementById("frame_id").contentWindow.location.href = "http://www.example.com";
document.getElementsByName("frame_name")[0].contentWindow.location.href = "http://www.example.com";
示例
以下是包含所有這些方法的完整工作程式碼片段 -
<!DOCTYPE html>
<html>
<head>
<title>Target a frame</title>
</head>
<body>
<button onclick="indexMethod()">Using Index</button>
<button onclick="nameMethod()">Using Frame Name</button>
<button onclick="queryMethod()">Using Query Methods</button>
<iframe src=""
height="150px"
width="100%"
name="frame_name"
id="frame_id" srcdoc="<html>
<body style='background-color:#ccc;'>
<h1>Testing iframe</h1>
</body>
</html>">
</iframe>
</body>
<script>
const indexMethod = () => {
const child = document.createElement('p');
child.innerText = 'added inside frame';
window.frames[0].document.body.appendChild(child);
};
const nameMethod = () => {
const child = document.createElement('p');
child.innerText = 'added inside frame';
window.frames["frame_name"].document.body.appendChild(child);
};
const queryMethod = () => {
const child = document.createElement('p');
child.innerText = 'added inside frame';
document.getElementById("frame_id").contentWindow.document.body.appendChild(child);
};
</script>
</html>
更新於: 2023年2月6日
493 次瀏覽
廣告