What is the best way to ascertain if a specific string is included in the URL of another frame on my website?

On my website, there is a parent page containing two iframes. Everything is set up as I want it, except for one issue when using the browser's back button - only one of the iframes updates its content. I am attempting to implement a check within the child frames to ensure that the correct content page loads in the other iframe (referred to as leftiframe and rightiframe).

Here is the code I have been working on, but it is not functioning as intended:

<script type="text/javascript">
window.onload = function() {
  if(/iframe1.html/.test(parent.leftiframe.location.href))
  {
  }
  else
  {
   parent.leftiframe.location.href="iframe1.html";
  }
}
</script>

If I modify the code to read the URL from the current window like this:

  if(/iframe2.html/.test(window.location.href))

it successfully reads the URL and updates the sister iframe without any problems. Why does replacing window with parent.leftiframe result in issues?

Any help would be greatly appreciated!

javascriptstringurlhttp-redirect

Answer №1

Give this a try:

<script type="text/javascript">
    window.onload = function() {
        if(/iframe1.html/.test(parent.leftiframe.contentWindow.location.href))
        {
            // Some code here
        }
        else
        {
            parent.leftiframe.contentWindow.location.href="iframe1.html";
        }
    }
</script>

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

Exploring shader file content within three.js with the help of jQuery

I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...

javascriptjqueryhtmlthree.jsshader

Utilizing React for incorporating HTML5 canvas gradients

I'm currently working on an app that allows users to generate a background gradient with two distinct colors using React. The issue I'm facing is that while the first color appears correctly, the second color ends up looking more like a solid col ...

javascriptreactjshtmlcanvashtml5-canvas

Receiving unexpected results when returning a function within a React hook

I'm currently working on developing a custom React hook that will provide users with a function to execute. This hook is designed to generate a function internally. Check out this simplified example // fetch.js import { useEffect, useState} from &qu ...

javascriptreactjsreact-hooks

Prevent the submit button from being clicked again after processing PHP code and submitting the form (Using AJAX for

I've set up a voting form with submit buttons on a webpage. The form and PHP code work fine, and each time someone clicks the vote button for a specific option, it gets counted by 1. However, the issue is that users can spam the buttons since there i ...

javascriptphpjqueryajax

The error message "Uncaught ReferenceError: e is not defined" is popping up in my code when

As a beginner with React and Material-UI, I am encountering an error that I cannot seem to resolve. When I load a component using material-ui/data-grid, the data grid simply displays "An error occurred" in the app. However, when I load the component withou ...

javascriptreactjsmaterial-ui

Encountered an issue when deploying a Gatsby JS site on Netlify due to a non-zero exit code returned by the build script

Recently, I discovered Gatsby JS (https://github.com/gatsbyjs/gatsby) and chose to construct my portfolio website using this generator. To begin, I forked their default starter site (gatsby-starter-default) and developed my portfolio from there (https://g ...

javascriptnode.jsreactjsgatsbynetlify

Tracking the advancement of synchronous XMLHttpRequest requests

Within the client-side environment, there exists a File-Dropzone utilizing the HTML5 File-API which allows users to drop multiple files for uploading to the server. Each file triggers the creation of a new XMLHttpRequest Object that asynchronously transfer ...

javascriptajaxjqueryxmlhttprequest

The Add/Remove button functionality is not functioning as expected for duplicated form fields when using jQuery

I am experiencing an issue with the functionality of the "Add another" and "Remove row" buttons in my form. I implemented code from a specific Stack Overflow answer (jquery clone form fields and increment id) to create a cloneable section, but only the ori ...

javascriptjqueryhtmlclone

Utilize puppeteer by passing a function inside page.waitForFunction() for efficient automation processes

Below is the code I am using: function checkDataRefresh(pastAvgGain, currentAvgGain) { if (pastAvgGain !== currentAvgGain) { return true; } else { return false; } } async function fetchInformation(pair, page) { let pastAvgGain = C.AVG ...

javascriptweb-scrapingpuppeteer

What is a more efficient method for identifying a single, specific object without using the index approach demonstrated here?

I need to verify if the taskDetails object contains only the lastTask value and no other values. To achieve this, I am currently using the approach with index [0] as shown below: Object.keys(this.clubdetails.taskDetails)[0]==["lastTask"] However, I have ...

javascriptvue.jsobjectfrontend

Fundamentals of object property in jQuery and Javascript

Currently working on creating a new property named startPosition and setting the top property to equal the button's current top value in CSS. Below is the jQuery code snippet: var morphObject = { button: $('button.morphButton'), c ...

javascriptjquerycss

How can a CSS class be used to toggle the visibility of a DIV element with JavaScript?

I've been researching and came across several scripts that allow for toggling the contents of a DIV by clicking on a button, however, they all use IDs. What I am looking to achieve is similar but using classes instead of IDs. This way, if I want to h ...

javascriptjqueryhtmlcss

Issue with AngularJS: $compile function is not functioning as expected

In this particular code snippet, I am encountering an issue with the $compile function. What I am trying to accomplish is taking an item, adding it to the scope, and then compiling it to generate HTML. $http({ method: 'GET', ...

javascriptangularjs

A function is unable to update a global variable

I have been working on a form that allows users to set the hour, with JavaScript validation in place to ensure there is input in the form. Initially, the global variable "userInputHours" is set to 0. Within the function "validation()", when the user meets ...

javascriptajaxvalidation

jQuery slideToggle function not working properly when clicking on a link within a div

I am facing a slight issue with the slideToggle function when there is a link inside the slideup panel. My goal is to create a button that, when clicked, will slide up a div displaying related posts. Subsequently, when another button or project link is cli ...

javascriptjqueryhtmlcss

Stuck on an endless loop of the Ionic splash screen

Currently, I am facing an issue with my Ionic 1 project. Everything was functioning properly until a few days ago when the splash screen stopped disappearing on iOS, although it still does on Android. I have searched for solutions on Google but haven' ...

javascriptiosangularjsionic-frameworkibeacon

Angular2's change detection mechanism does not behave as anticipated after receiving a message from a Worker

Within my angular2 application, I encountered a rather intriguing scenario which I will simplify here. This is AppComponnet export class AppComponent { tabs: any = []; viewModes = [ { label: "List View"}, { label: "Tree View" }, ...

javascriptangularangular2-changedetection

"Learn the steps to access a JSON file directly from a URL within a Next.js

My goal is to upload a JSON file to the server from a URL, open it, parse it, and display its features on Google Maps. However, I am encountering an error with the "fs" library preventing me from opening the file. Below is the code: "use client" ...

javascriptreactjsnode.jsgoogle-mapsnext.js

The Mongodb database is failing to recognize updates made to the Mongoose schema

I have already created my database with the following schema: const ProjectSchema = new mongoose.Schema({ name: { type: String }, description: { type: String }, client: { type: mongoose.Schema.Types.ObjectId, ref: 'client& ...

javascriptnode.jsmongodbmongooseschema

Starting up various modules in Angular 6 using arrays

Can an array be declared and used to bootstrap multiple components in module.ts? I attempted the following: export var initialComponents = []; initialComponents.push(AppComponent); if(condition) { initialComponents.push(IchFooterComponen ...

javascriptangulartypescriptfrontendangular6