search

Home >Web Front-end >JS Tutorial >How to target a specific frame via hyperlink in JavaScript?

How to target a specific frame via hyperlink in JavaScript?

WBOY
WBOYforward
2023-09-08 14:01:09868browse

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

HTML frames provide a convenient way to divide the browser window into multiple parts.

Each of these sections can load a separate HTML document. We can use JavaScript to load content into a specific frame, using the frame property of the window object. The Frames property is an array-like object that contains all frames (including iframes) on the current page.

We can use the window.frames[] property in various ways to load the content of the document into a frame. Let's look at them one by one -

1. Using index

To target a specific frame, you can use the index or name of the frame. For example, to target the first frame on the page, you would use the following code -

window.frames[0].document.location.href = "http://www.example.com"

2. Use frame name

To locate a frame using its name, you can use the following method. Assume the name of the frame is "frame_name" -

window.frames["frame_name"].document.location.href = "http://www.example.com";

3. Use getElementById and getElementByName

You can also use the getElementById() or getElementsByName() method to locate the frame, and then use the method contentWindow to access the frame window as follows -

document.getElementById("frame_id").contentWindow.location.href = "http://www.example.com";
document.getElementsByName("frame_name")[0].contentWindow.location.href = "http://www.example.com";

Example

The following is a complete working code snippet containing all these methods -

<!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>

The above is the detailed content of How to target a specific frame via hyperlink in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to identify the type of Image instance using FabricJS?Next article：How to identify the type of Image instance using FabricJS?

Related articles

See more