Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example:

<iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe>

My goal is to display an alert whenever the location of the iframe changes as a result of the user clicking on a link within it.

Trying

onLoad="alert(this.ContentWindow.location.href);"

does not produce the desired outcome.

Similarly, using onLoad="alert(this.src);" only displays the initial source (../wiki/Special:Random) regardless of the user's actions.

It is important to note that the user will remain within the same domain, so the Same Origin policy is not being breached.

javascript html css

Answer №1

Always remember to use the correct case when coding in "contentWindow" instead of "ContentWindow".

<iframe src="your initial URL" onload="alert(this.contentWindow.location.href)" />

This method is effective and functional.

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

Select specific columns from an array using Typescript

I have a collection of objects and I'm looking for a way to empower the user to choose which attributes they want to import into the database. Is there a method to map and generate a separate array containing only the selected properties for insertion ...

javascript typescript

AngularJS's ng-repeat feature is not properly re-embedding tweets

In my project, I am utilizing angularjs to showcase tweets. The implementation involves using ng-repeat alongside a filter that is directly linked to the state of a checkbox. When the checkbox is checked, the filter returns all the tweets (the default beha ...

html angularjs twitter

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

javascript jquery html css yii2

What would be the best way to structure this workflow as a JavaScript data format?

I have a complex workflow that I need to represent as a JavaScript data structure. This workflow involves a series of questions and answers where the response to one question determines the next one asked. Here is a basic example of what this workflow migh ...

javascript data-structures recursion nodes tree-nodes

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascript html css

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascript jquery html css

Challenges related to height

Having an issue with height in my code. My footer is set up like this: <html> <body> <div class='wrap'> <div class=principal></div> <div class='clear'></div> <foo ...

jquery html css

Error: Uncaught promise rejection - The function is undefined in the context of Vue.js and Electron

I've been experimenting with anime.js to animate elements using promise functions. However, I'm encountering an issue where the second function does not run after the previous one successfully completes. <script> import Splash from '. ...

javascript node.js vue.js promise electron

Login form with AJAX for seamless submission without page refresh

I found a helpful tutorial on creating a login form at This tutorial focuses on authenticating against our LDAP server. However, I am running into an issue with the following line of code: success: function(){ $('form#submit').hide(function() ...

php jquery html ajax

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

javascript html validation

Incorporate tinyMCE into a colorbox module

Currently, I am facing an issue on my website where there are textareas with tinymce. While I can view all the textareas correctly, when trying to open colorbox within a textarea, it does not inherit the tinymce properties. The code snippet used to open co ...

javascript jquery tinymce colorbox

How can I verify the status of an occasional undefined JSON value?

There are times when the JSON object I'm trying to access does not exist. Error: Undefined index: movies in C:\xampp\htdocs\example\game.php In game.php, I'm attempting to retrieve it from the Steam API using this code: $ ...

javascript php json ajax

Check for pattern using JavaScript regular expression

Utilizing ng-pattern to validate a regular expression. The pattern must include 3 letters and 2 numbers in a group. For example: G-31SSD or G-EEE43 Currently, the pattern only matches the second example. ng-model="newGroup.groupCode" ng-pattern="/^&bso ...

javascript regex angularjs regular-language

Creating ngModel dynamically with *ngFor in Angular 2: A guide

I've been struggling with this for the past couple of days - how can I have a new ngModel for each iteration within an *ngFor loop? The idea is that I load a list of questions, and within each question there are 2 propositions. Here's the HTML: & ...

html loops angular angular-ngmodel ngfor

Preventing PCs from accessing a specific webpage: A step-by-step guide

I am currently using the code below to block phones: if { /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i .test(navigator.userAgent)) { window.location = "www.zentriamc.com/teachers/error ...

javascript html css

load a file with a client-side variable

Is there a way to load a file inside a container while utilizing an argument to fetch data from the database initially? $('#story').load('test.php'); test.php $st = $db->query("select * from users where id = " . $id); ... proce ...

javascript php jquery

Safari is experiencing issues with overflow-x functionality after a device rotation

I'm currently in the process of developing a website that requires a specific div element to be horizontally scrollable if its content exceeds the screen size. This functionality works smoothly on most browsers, except for Safari: Scenario: When the ...

html css ipad safari touch

Dealing with a JavaScript Problem on Wordpress Using AJAX

Struggling with transitioning a website from Drupal to WordPress, I encountered an issue with a page that utilizes AJAX. A user followed a tutorial on implementing AJAX using JavaScript, PHP, and MySQL. Even though the AJAX functionality works fine on Drup ...

javascript php jquery ajax wordpress

Is it considered undesirable to have HTML source code all condensed into a single, uninterrupted line?

I have been thinking about my approach in my PHP CMS application. I currently capture most of the generated HTML into buffers and then flush their content at the appropriate location in the template page using my custom buffer class. Recently, I added a me ...

php html minify

CSSer Q&A