JavaScript 如何从一个超链接中锁定一个特定的框架

HTML框架提供了一种方便的方法，可以将一个浏览器窗口分成多个部分。

每个部分都可以加载一个单独的HTML文档。我们可以使用JavaScript，通过窗口对象的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>