How to target a specific frame via hyperlink in JavaScript?-JS Tutorial-php.cn

How to target a specific frame via hyperlink in JavaScript?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2023-09-08 14:01:09

forward

922 people have browsed it

如何在 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"

Copy after login

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";

Copy after login

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";

Copy after login

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>

Copy after login

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!