Issue with Javascript bug in webkit browser causing navigation of content within an iframe

We have successfully implemented a solution that works in IE and Firefox browsers, as demonstrated below. However, we are encountering an issue with Chrome and Safari where the content constantly loops within the iframe source. This is where we require assistance to resolve the problem specific to Chrome/Safari.

The objective was to provide our users with direct access to a page on our site that is iframed. Upon accessing the page, it should display the appropriate iframe template. While this approach functions effectively on IE/Firefox, it does not work on Chrome and Safari.

These two pages contain identical content, but utilize different iframed templates.

For instance, by clicking this link, the user will be directed to the Awards Recognition content wrapped in the AMU template with #AMU added to the URL

Similarly, the exact same content will be displayed with the APU template using #APU appended to the URL


Below is the javascript code for the parent iframe:

<script type="text/javascript">
function gup( name ) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)"; 
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
        return "";
    else
        return results[1];
}
var ifSrc = gup("forward");
$(function(){ 
    if(ifSrc)
        $("#iframe").attr('src', ifSrc);
});
</script>

Additionally, provided below is the code intended for the source content and the corresponding page:

<script type="text/javascript">
function fnGetDomain(url) {
    if(url)
        return url.match(/:\/\/(.[^/]+)/)[1];
    else
        return "";
}
var curDomain = fnGetDomain(document.referrer);
var curHash = document.location.hash.toLowerCase();
try { frameEl = window.frameElement; }
catch(e) { frameEl = 1; }
if(!frameEl) {
//if (frameElement == null) {
    if(!curDomain)              curDomain = "www.apu.apus.edu";
    if(curHash == "#apu")       curDomain = "www.apu.apus.edu";
    else if(curHash == "#amu")  curDomain = "www.amu.apus.edu";
    //change location or close
    window.location = "http://" + curDomain + "/community/alumni/index.htm?forward=" + document.location.href;
    // or window.close();
}
</script>

Answer №1

Before this, check if(frameEl) {

if ($.browser.webkit) {
    if(top === self) frameEl = 0;
    else frameEl = 1;
}

Answer №2

When you make changes to the iframe, it seems like $(document).ready() keeps triggering repeatedly. Have you experimented with switching from a jQuery call for document ready to using an immediate function?

<script type="text/javascript>
function grabParam( paramName ) {
    name = paramName.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regExpString = "[\\?&]"+name+"=([^&#]*)"; 
    var regex = new RegExp( regExpString );
    var matchingResults = regex.exec( window.location.href );
    if( matchingResults == null )
        return "";
    else
        return matchingResults[1];
}
var sourceForIframe = grabParam("forward");

// edit: please note there is no $ in front and () at the end.
(function(){ 
    if(sourceForIframe) {
     var iframeElement = document.getElementById('iframe');
     iframeElement.src = sourceForIframe;
    }
})();

</script>

Add this snippet at the conclusion of your document, and it should behave as expected. Another suggestion is attempting to execute that function not on document ready but rather on the ready function of #iframe:

$('#iframe').ready(function(){ 
    if(sourceForIframe)
        $("#iframe").attr('src', sourceForIframe);
});

Answer №3

perhaps consider:

if (top === self) { 
  frameEl = 1;
}

specifically for Chrome browsers

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

When it comes to optimizing JavaScript, what is the best approach for replacing multiple substrings in a string with various strings?

While working on the code I develop and maintain, I encountered an issue. There is a function in my code that takes a query (in the form of a string) and replaces certain substrings within that string with different ones. For instance, if a user inputs th ...

The issue of height and width always being zero in Chrome when using Classic ASP with JavaScript

Within my markup, I have an image field that I am setting the source for using JavaScript. I am in need of its height and width, so I utilized the image.height() and image.width() methods. Despite working properly in Internet Explorer, these methods do not ...

What can you do with jQuery and an array or JSON data

Imagine having the following array: [{k:2, v:"Stack"}, {k:5, v:"Over"}, , {k:9, v:"flow"}] Is there a way to select elements based on certain criteria without using a traditional for/foreach loop? For example, can I select all keys with values less than ...

A guide on incorporating and utilizing third-party Cordova plugins in Ionic 5

Attempting to implement this plugin in my Ionic 5 application: https://www.npmjs.com/package/cordova-plugin-k-nfc-acr122u I have added the plugin using cordova plugin add cordova-plugin-k-nfc-acr122u but I am unsure of how to use it. The plugin declares: ...

Is it possible to utilize Vue.js' v-if directive to validate if a certain value is present within an array

In my form, I have a checkbox and I want to be able to use v-if directly to display or hide sections based on the selected checkbox values. Can this be done using v-if, or do I need to use watch:? ...

Remembering previous scroll position with jScroll upon revisiting page

I'm implementing infinite scrolling of products on our site using jQuery jScroll. Can anyone guide me on how to save the scroll position when the user returns to the homepage? Appreciate any assistance! ...

What could be causing json_decode to return NULL in this scenario?

I have a custom array that I've created with the following structure: [{ "assetPreviewUrl":"pic1.jpg", "assetUrl":"pic2.jpg" }, { "assetPreviewUrl":"pic3.jpg", "assetUrl":"pic4.jpg" }] My approach involves stringifying this array and ...

Restricting the input range with JQuery

Need assistance with limiting user input in a text box for amounts exceeding a specified limit. Attempted using Ajax without success, considering jQuery as an alternative solution. Any expertise on this matter? function maxIssue(max, input, iid) { v ...

Issue with adding dynamic keys to state in Next.js using Zustand for state management not resolving

I've been experimenting with dynamically adding a key to a state in zustand. I've attempted various methods such as 1. const store = (set, get) => ({ keyAttrib: {key1: "value1", key2: 2}, update: (key, value) => { let new ...

Once the class is displayed in the DOM, click on the button to proceed

Within a popup window, there exists a form that utilizes Ajax to send data. Upon successful submission of the form, a message indicating success will appear below with the class name .form-message--success. My goal is for the close button within the window ...

Why is the AJAX request not functioning properly after using jQuery's hide method?

It seems that the first AJAX call works fine when I hide the div, but subsequent requests are not going through. a) Clicking on the signup button triggers an AJAX request to display the details. b) Pressing the hide button hides everything within that di ...

Implement ng-model on an input field that is pre-filled with a value from a different model within the Angular

One challenge I am facing involves pre-populating an input field with user information, such as their email address or first name, if that data is available. Initially, I set the value of the input field using $scope.userData. However, when I add an ng-mo ...

Best method for displaying a div using ASP.NET server controls

There is a concealed div containing ASP.NET server buttons. When I display the content of this div as a modal window on the page using JavaScript by copying innerHTML, the buttons do not trigger server events. Can anyone offer a solution to this issue? ...

React: Improve performance by optimizing the use of useContext to prevent unnecessary re-renders of the entire app or efficiently share data between components without causing all

In my app, I have a Header.tsx component that needs to be accessible on all pages and a Home.tsx component where most of the content resides. The Home.tsx component includes an intersectionObserver that utilizes the useContext hook (called homeLinks) to p ...

Issue with Passport Google Oauth login redirection to successful route

I am currently following a tutorial on setting up Google Oauth in my Express app using Passport.js. The tutorial can be found here. Below are the routes defined in my server.js file: // Code snippet here The server.js file also imports configurations fro ...

Unraveling the mysteries of deciphering extended JSON information

Issue with Data Interpretation I am facing a challenge in my project that is more related to understanding and interpreting data rather than writing code. The project involves using a NoSQL database, specifically MongoDB, to store information sampled from ...

The origin of the recipient window does not match the target origin provided when using postMessage on localhost

Currently, I am in the process of developing an application that utilizes single sign-on (SSO) for user authentication. Here is a breakdown of the workflow: Begin by launching the application on localhost:3000 (using a React Single Web Application). A po ...

PDF links not loading properly in Chrome's PDF Viewer, causing them to become stuck

While working on a website we are developing, we encountered an issue with PDF download links getting stuck while loading in Chrome's built-in PDF viewer. The links work fine in other browsers and can be triggered for download. Right-clicking and sele ...

An engaging webpage with a dynamic scroll feature

I recently inherited a dynamic HTML page that utilizes bootstrap and jqxGrid, and it calls server side code to retrieve data. However, after the data is loaded and the jqxGrid is populated, the page automatically scrolls down. Since I got the code from a ...

Using indented, multi-line logging in a NodeJS environment can help to

I'm looking for a way to display objects that have been printed with JSON.stringify() in the console, specifically within the context of a Mocha test suite output. While my tests are running, I want the object log lines to be indented further to the ...