数据结构
网络
关系数据库管理系统
操作系统
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 次浏览
广告