Question

I’m using Fancybox from FancyApps to preview content on my website.

<a href="#inline" class="various"><span class="info"></span></a>

<div id="inline" style="display:none;width:500px;">
    <h2>Always enjoy the sunny days!</h2>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox({
                maxWidth    : 500,
                autoSize    : true,
                closeClick  : false,
                openEffect  : \'none\',
                closeEffect : \'none\'
            });
    });
</script>

Basically this is working fine, but in one situation I need to redirect my site to a secure server, so the domain will change.

Example:

https://secure-payment.com/relay/v2/relay.cgi/http://www.mydomain.com/checkout

When I use the link to trigger Fancybox no this page, I just get “The requested content cannot be loaded. Please try again later.“

In addition (I don’t know if it’s relevant) I’m running the script below on the bottom of my page, this is as requested from the payment company.

//
// Variables used for searching
//
var relayurl = "https://relay.ditonlinebetalingssystem.dk/";
var relayurl_replace = "https://relay.ditonlinebetalingssystem.dk/relay/v2/relay.cgi/";
var baseurl = "";

function getURLParam(strParamName){
  var strReturn = "";
  var strHref = window.location.href;
  if ( strHref.indexOf("?") > -1 ){
    var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
    var aQueryString = strQueryString.split("&");
    for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
      if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
        var aParam = aQueryString[iParam].split("=");
        strReturn = aParam[1];
        break;
      }
    }
  }
  return unescape(strReturn);
} 

//
// Replace all links to NOT use the relay-script when the user clicks on the links
//
function replaceRelayButtons(parent, startTimer) {  
    var aEls = parent.childNodes;
    for (var i = 0, aEl; aEl = aEls[i]; i++) {
        //
        // Do recursive call
        //
        replaceRelayButtons(aEls[i]);

        if (aEls[i].tagName == 'A' || aEls[i].tagName == 'a') {
            if (aEls[i].href.indexOf(relayurl) == 0) {
                aEls[i].href = aEls[i].href.replace(relayurl_replace, "");
                aEls[i].href = aEls[i].href.replace(relayurl, "")
                if (aEls[i].href.indexOf("http://") != 0) {
                    aEls[i].href = (baseurl + "/" + aEls[i].href);
                }
            }
        }
        if (baseurl.length > 0) {
            if (aEls[i].tagName == 'IMG' || aEls[i].tagName == 'img') {
                if (aEls[i].src.indexOf(relayurl) == 0 && aEls[i].src.indexOf(relayurl_replace) == -1) {
                    aEls[i].src = aEls[i].src.replace(relayurl, relayurl_replace + "/" + baseurl + "/");
                }
            }
        }
    }

    //
    // Now start the timer which runs this function again to fix all body elements that might not be loaded in the browser yet
    //
    if (startTimer) {
        setTimeout("replaceRelayButtons(document.body, false)",1000)
        setTimeout("replaceRelayForms()",1000)
    }
}

//
// Replace all form actions to NOT use the relay-script when the user clicks on the links
//                              
function replaceRelayForms() {
    for (i = 0; i < document.forms.length; i++) {
        if (document.forms[i].action.indexOf(relayurl) == 0) {
            document.forms[i].action = document.forms[i].action.replace(relayurl_replace, "");
            document.forms[i].action = document.forms[i].action.replace(relayurl, "")
            if (document.forms[i].action.indexOf("http://") != 0) {
                document.forms[i].action = (baseurl + "/" + document.forms[i].action);
            }
        }
    }
}

//
// Go and replace the urls and form actions
//
if (getURLParam('baseurl') != null) {
    baseurl = getURLParam('baseurl')
}
replaceRelayButtons(document.body, true);

What Might I be doing wrong? Is this even possible?

Answer 1

I don’t think much is wrong, but you can’t load a HTTPS URL into a HTTP url, because it should be a secure URL aswell. This because fancybox generates a iFrame if the URL is another domain.

IE will show you a error, but Firefox will load the page, try it and you will see.

For more detailed information: JavaScript HTTPS to HTTP iFrame Security Question