Updating the innerHTML of a frameset

I have a unique challenge that involves loading the frameset of www.example.com/2.html when accessing www.example.com/en/test/page.html.

Successfully accomplished this task.

Now, after loading 2.html in the frameset, I want to modify ".html" to ".html" target="_top".

This way, all links within 2.html will open in the parent window instead of the frameset itself.

<!DOCTYPE html">
<html lang='en' xml:lang='en' xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <meta charset="utf-8" />
                    <title>Test Page</title>
                            <script> 
                            (function divert()
                                    {
                                    var urlString = parent.document.URL;
                                    var a1 = new RegExp("/en/test/page");
                                    if(a1.test(urlString))    {document.write('<frameset cols="100%" rows="100%"><frame src="http://www.example.com/2.html"></frameset>');}
                                    else{document.write('<frameset cols="100%" rows="100%"><frame src="http://www.example.com/3.html"></frameset>');}

                                    var str = document.getElementById("demo").innerHTML; 
                                    var res = str.replace('.html"', '.html" target="_top"');
                                    document.getElementById("demo").innerHTML = res;
                                    })();
                            </script>
    </head>
    <body onLoad="divert()"></body>

Answer №1

Greetings @Vinod, here's a neat trick you can use: utilize target="_parent" if your frame-set consists of only 2 levels or if you simply wish to direct the link to the parent frame exclusively.

If you want to open the link on the current page, consider using target="_top".

To delve deeper into this topic, check out this resource.

LATEST UPDATE:

An alternative approach is to employ JavaScript to determine whether the page is displayed within a frame and subsequently add targets to the links programmatically.

You can make use of window.location.origin along with parent.window.location.origin to ascertain if you are within a frame.

Subsequently, implement the following code snippet to incorporate target attributes via JavaScript:

When utilizing jQuery:

$(document).ready(function(){
  $('#link_other a').attr('target', '_blank');
});

Without relying on jQuery:

window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}

Answer №2

<!DOCTYPE html">
<html lang='en' xml:lang='en' xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <meta charset="utf-8" />
                    <title>Unique Test Page</title>
                            <script> 
                            (function custom()
                                    {
                                    var urlString = parent.document.URL;
                                    var a1 = new RegExp("/en/custom/page");

                                function targetSite(){
                                 var links = document.getElementById("special").contentDocument.documentElement.getElementsByTagName('a');
                                 for(var i =0; i<links.length; i++){
                                 links[i].target = '_parent';}
                                }

                                    if(a1.test(urlString)){document.write('<frameset cols="100%" rows="100%"><frame id="special" src="http://www.unique.com/2.html"></frameset>');}
                                    else{document.write('<frameset cols="100%" rows="100%"><frame id="special" src="http://www.unique.com/3.html"></frameset>');}
                                    document.getElementById("special").onload= targetSite;
                                    })();
                            </script>
    </head>
    <body></body>
</html>

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

Creating DIV's with Equal Heights Using AngularJS ng-repeat

I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...

In Vuejs, all assignments are made by reference, even when using object spreading

If the HTML structure is: <div id="app"> <button @click="doEditing">Edit</button> <input v-if="editing" v-model="editing.profile.name" /> <span>{{ user.profile.name }}</span> </div> And Vuejs setup is: va ...

What is causing my AJAX function to malfunction and throwing an exception for undefined data objects?

I am having trouble with my ajax query in my code. Even though it is returning the required data, it is not displaying properly within the HTML code. I have a common header and footer (PHP) for all other files. Despite my efforts to resolve this issue by s ...

OutOfMemoryError caused by Bitmap

I'm experiencing an issue with this error. I created a favicon parser from URLs using the following code: public class FavIconParser { public static String extractUrl(String url) { StringBuffer sb = new StringBuffer(); Pattern p = Pattern.co ...

There was a TypeError encountered while trying to read properties of undefined in Next.js version 13

I've encountered a problem in the title with my post API endpoint that I created in Next.js. The purpose of my endpoint is for form submission, where I gather inputs and send them to my email. Currently, my code successfully sends the email and I rec ...

What is the best way to assign a Python variable to an <a-assets> element?

There exists a Python function that provides the chosen background <a-sky ID="sky" color="{{object.background}}"></a-sky> The backgrounds can be in the format of '#c6aa99', '#e1a600', '#290942', 'star' ...

Having trouble adding the Vonage Client SDK to my preact (vite) project

I am currently working on a Preact project with Vite, but I encountered an issue when trying to use the nexmo-client SDK from Vonage. Importing it using the ES method caused my project to break. // app.tsx import NexmoClient from 'nexmo-client'; ...

Enhance your Facebook sharing by including unique element IDs as hashes in PHP code

Over at this specific page, I have a collection of neatly presented mp3 files in stylish boxes. Each one of these boxes features a Facebook share button. I'm looking to incorporate the unique identifier for each box, such as (mp3jWrap_0, mp3jWrap_1, ...

Using Vue to perform multiplication on data table entries

Is there a way I can use Vue.js to multiply values in a table? The values provided are for 100g of the product. For example, if I input 200g, I would like the values to double: 318kcal, 12 fat, 48 carbs, 8 protein, and 2% iron. Similarly, inputting 50g sho ...

A platform for creating ER and flow diagrams specifically tailored for web applications, utilizing open source software

Our team is currently working on creating a web application that enables users to create diagrams, such as flow or ER diagrams. We are looking for ways to convert these diagrams into XML or other formats for representation. Are there any open-source soft ...

Choose an option with JavaScript once the request is successful

Choose the day, month, and year using JSON data success: function(jsondata){ var data=JSON.parse(jsondata); var list_html="<div id='editrelation'><label id='dateLabel' style='display:none&apo ...

"Transforming Selections in Illustrator through Scripting: A Step-by-Step Guide

In Illustrator, I successfully used an ExtendScript Toolkit JavaScript code to select multiple elements like text, paths, and symbols across different layers. Now, I am looking to resize them uniformly and then reposition them together. While I can apply ...

What is the best method for ensuring that my JavaScript tracking script has been properly installed on the customer's website?

We provide a SAAS analytics application that functions similarly to Hotjar and Google Analytics. To track user data, our customers must integrate our JavaScript code into their websites. How can we confirm if the script has been successfully integrated in ...

What could be causing passport.authenticate to not be triggered?

After multiple attempts to solve my first question, I am still unable to find the answer. Maybe it's due to being a newbie mistake, but I've exhausted all my efforts. This is how I created the new local strategy for Passport: passport.use(new ...

what is the best way to align text with an image using CSS

Is there a way to display a form within an image without making it messy with additional tags and text? Below is the code that I currently have: .box { width: 650px; padding-right: 15px; /* creates gap on the right edge of the image (not con ...

Accessing data from arrays asynchronously using JavaScript

Update I have included actual code below, in addition to the concept provided earlier. Here is the async array access structure I am trying to implement: for (p = 0; p < myList.length ; p++){ for (k = 0; k < RequestList.length; k++){ i ...

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

When it comes to loading a CSS file based on the user's selected theme, I encountered an issue while trying to implement this in my Symfony application using Twig templates. The code worked flawlessly on a simple HTML page, but transferring it to a Tw ...

Tips for wrapping a function call that may occasionally involve asynchronous behavior to ensure it runs synchronously

I am dealing with a function that functions as follows: _setDataChunk: function (action) { var self = this; /* some code */ var data = self._getDataChunk(action); populateWidget(data); } Sometimes GetDataChunk cont ...

Guide to forming a JavaScript array from nested JSON data

Looking to parse through an array of objects related to London weather data from the OpenWeatherMap API. How can I create three distinct arrays in JavaScript, each with variable names "dtArray", "tempMinArray", and "tempMaxArray", containing only values f ...

The modal is not displayed when the on click listener is triggered

I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...