aiming at another iframe using its unique identifier

I currently have three IFrames set up in my index.html

<html>
<head>
    <title>Frame</title>
    <style>
.Top {
    float:both;
    width:99.7%;
    height:18%;
}
.menu {
    float:left;
    width:13%;
    height:82%;
}
.mainContent {
    float:left;
    width:86.5%;
    height:82%;
    }
  </style>
</head>
<body>
    <iframe class="Top" src="judul.html" id="atas"></iframe>
    <iframe class="menu" src="list.html" id="kiri"></iframe>
    <iframe class="mainContent" src="" id="tengah"></iframe>
</body>
</html>

Next, here is the code snippet from list.html

<html>
<head>
    <title>List</title>
</head>
<body>
    <br></br>
    <a href="about.html" target="tengah" style="color:blue;margin-center:40px;font-family:Segoe UI;">Main page</a>
    <br></br>
    <a href="list.html" target="tengah" style="color:blue;margin-center:40px;font-family:Segoe UI;">About Us</a>
</body>
</html>

In the index.html file, the goal is to target the IFrame with the id tengah to open links from list.html

While adding a target= attribute alongside the href works in framesets, it may behave differently in IFrames. To make this work properly in an IFrame, additional steps or adjustments might be necessary.

Thank you for your help!

P.S.: The judul.html only affects the Top frame and does not interfere with the other IFrames.

Answer №1

To successfully implement the functionality, be sure to include name="tengah"

<a target="_blank|_self|_parent|_top|framename"> 

_blank This option will open the linked document in a new window or tab

_self Use this option to open the linked document in the same frame as it was clicked (default behavior)

_parent This choice will open the linked document in the parent frame

_top Choose this option to open the linked document in the full body of the window

framename If specified, this will open the linked document in a named frame

 <iframe class="mainContent" src="" id="tengah" name="tengah" ></iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to set the tab as "active" in the first iteration of a PHP while loop?

When using a while loop to populate tabs with PHP, maintaining only one active tab at a time can be tricky. I have grasped that assigning the 'active' class within the loop causes all tabs to become active. So, how should I modify the script if I ...

What is the specific character code assigned to the "Enter" key on a

Check out this code snippet: http://jsfiddle.net/YttKb/ In my javascript, I am trying to add a new line of text using utf-8 coding. Which character should I use to make a new line? It seems like \n only creates a line break, not a new line of text. ...

R code for extracting data without using CSS path

Hey there, I'm reaching out because I'm struggling to figure out how to extract data from a webpage (""). Learning how to scrape data is my current project, and I'm specifically trying to gather contact information (Office, Fax, email) from ...

Tips for activating a deactivated input field in ReactJS

I am trying to create a feature where my textfields are automatically disabled, but can be enabled for editing by clicking an 'Edit' button. Clicking the button again should disable the textfields and save any edits made. I have experimented with ...

Middleware in the form of Try and Catch can be utilized to handle errors and

Currently, I am working on developing a backend using node.js with Express. My main goal is to effectively handle any potential status 500 errors that may arise. router.put('/test', async (req, res) => { try { return res.send(await r ...

How can the token be verified when authorizing Google OAuth 2.0 on the server side?

Unable to validate the user token ID on the server side despite following Google's guide at https://developers.google.com/identity/sign-in/web/backend-auth In JavaScript, I retrieve the id token and send it to the server: var googleUser = auth2.cur ...

React.js Filter Component

I'm currently trying to create a filter for my "localtypes", but I'm encountering an issue where the console in my browser is displaying an empty array. My goal is to access the localtypes properties of the API that I am working with. I attempte ...

What is the best way to display JSON file results when clicking a button using Vue?

Once again, it's me! Check out my latest project here I am looking to retrieve data from a json file by inputting the necessary details and clicking on the button. For instance, let's say we want to find job listings for developers in Istanbul ...

unable to locate express router

Recently, I set up an express project using the express generator with the following commands: express project_name and npm install Here is a snippet from my app.js file: var express = require('express'); var path = require('path') ...

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...

Customizing the Switch component individually for each item fetched from an API in React Native

I'm struggling with setting the switch button individually for each item in my API. Despite trying multiple solutions, none of them seem to work for me. const results = [ { Id: "IySO9wUrt8", Name: & ...

Is it possible for two node scripts running on the same machine to interfere with each other's execution

In the scenario where a parent node file (such as an express server) spawns child nodes that execute computationally intense tasks, will these children cause blocking for the parent process? ...

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

The Bootstrap modal will not appear when the parent container's position is fixed

I am having an issue with a bootstrap modal that I am using as an instruction guide. My goal is to keep it fixed at the top-right corner of the viewport, so I tried using the fixed position. However, when I do this, the modal turns grey. On the other han ...

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...

"Encountering an error with ExpressJS where it cannot GET a file, preventing access to other folders' content

My goal is to set up a simple server using expressJS to retrieve data for my Angular application. However, I've encountered an error that says 'Cannot GET/'. This is the code snippet of the webserver I attempted to create: var express = re ...

Is there a way for my code to detect when a function and a timeout are in progress?

Is there a way to disable my button after just one click, or when the timeOut function is running? Currently, I have code that allows the button to be clicked only if my moneyValue is greater than money, and it's working perfectly. Now, within that sa ...

The reason why JavaScript condenses two or more spaces into just one space

After encountering a problem with my HTML/JS/Angular script, I created a simple demo to illustrate the issue. Although I have found a solution, I still wanted to seek advice from experts. <body ng-app> <div ng-controller='abc'> ...

What steps should I take to address the error message "TypeError: express-validator is not a function

I am currently utilizing express-validator version 6.4.0 and encountering an error when running the server. I have attempted to implement custom validation by organizing separate files for validator, controller, and routes. Here is the primary server file ...

Tips for maintaining an updated array's consistency on page refresh in Vue.js?

HelloWorld.vue Dynamic routing in Vuejs: <template> <div> <b>Vuejs dynamic routing</b> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp; <rou ...