如何在 JavaScript 中通过超链接定位特定框架？-魔扣目录

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 中通过超链接定位特定框架？的详细内容，更多请关注www.92cms.cn其它相关文章！