jackhao jackhao - 3 months ago 10
jQuery Question

Force http protocol in Javascript file from local protocol

We are using HTML5 to develope an phone app, which means that our local protocol on the phone is file://. We are trying to include Opentable's widget on our page for now. But their widget JS link looks like:

<script type='text/javascript> src='//secure.opentable.com/widget/reservation/loader?rid=27763&domain=com&type=standard&theme=standard&lang=en&overlay=false&iframe=true'></script>


Note that it starts with

//secure.opentable.com


So it will get our file:// protocol automatically. But even I change it to

https://secure.opentable.com


It still does not work on local. I noticed that in their JS source, they still used "//" which will somehow still get our "file://" protocol.

Here is the error after I change the link to https://secure.opentable.com/...


Failed to load resource: The requested URL was not found on this
server.

file://www.opentable.com/widget/reservation/canvas?rid=27763&domain=com&type=standard&theme=standard&lang=en&overlay=false&insideiframe=true


I noticed that in the console it looks like:

enter image description here

How can I make it work for a local environment?

Thanks!

Answer

Maybe this will work:

$(document).ready(function() {
    $("iframe[src^='//www.opentable.com']").attr('src', function(i, oldsrc) {
        return "https:" + oldsrc;
    });
);

It waits until the document is ready, which should be after the new IFRAME is added to the DOM, then it replaces its src with one with the https: protocol.