CODEWITHSUNDEEP
javascriptgoogle-chromeiframesafariwebkit
Evan
Evan

Reputation: 3511

Javascript bug with webkit browser navigating content from an iframe

We have this solution working in IE and Firefox browsers, which you can demo below, but should you click the demo links using Chrome or Safari, the content will constantly loop the template in the iframe source, which is where I need your help for a solution to resolve the Chrome/Safari issue.

We needed a solution for our users to directly access a page of ours that's iframed and when they access the page, it would wrap the page with the appropriate iframe template. As mentioned above, the solution works in IE/Firefox, but not Chrome and Safari.

Both these pages have the same content, but a different iframed template.

For example, clicking this link will take the user to the Awards Recognition content and it will wrap the AMU template around the same page with #AMU appended to the URL http://www.apus.edu/alumni/awards-recognition/index.htm#AMU

This is exact same content, but it will wrap the APU template around the same page since #APU appended to the URL http://www.apus.edu/alumni/awards-recognition/index.htm#APU

Below is the javascript that goes on the parent iframe: http://www.apu.apus.edu/community/alumni/index.htm

<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>

Below is the code that's meant for the source content and the page it would go on: http://www.apus.edu/alumni/awards-recognition/index.htm

<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>

Upvotes: 0

Views: 696

Answers (3)

phillihp
phillihp

Reputation: 648

This before if(frameEl) {

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

Upvotes: 1

phillihp
phillihp

Reputation: 648

maybe try:

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

for Chrome

Upvotes: 0

Jim Schubert
Jim Schubert

Reputation: 20357

It looks like modifying the iframe causes $(document).ready() to fire over and over again. Have you tried changing this from a jQuery call to document ready to an immediate function?

<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");

// edit: notice no $ in front, and () at the end.
(function(){ 
    if(ifSrc) {
     var iframe = document.getElementById('iframe');
     iframe.src = ifSrc;
    }
})();

</script>

Put this at the end of your document and it should work as you're expecting. Another thing you might want to try is instead of calling that function on document ready, do it on #iframe's ready function:

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

Upvotes: 0

Related Questions