如何在 JavaScript 中通过超链接定位特定框架？

前端开发教程 2025-01-31 0

HTML 框架提供了一种将浏览器窗口划分为多个部分的便捷方法。

其中每个部分都可以加载单独的 HTML 文档。我们可以使用 JavaScript 将内容加载到特定的框架中，使用窗口对象的框架属性。 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>

以上就是如何在 JavaScript 中通过超链接定位特定框架？的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。