How to open a URL link from JavaScript inside a Google Apps Script HTML Google Site Gadget

Question

I have written an HTML (not UI) gadget in Google Apps Script to be embedded in a Google Site. The gadget presents a drop-down with options that contain URL/display name value/text pairs.

I want to put a button in the gadget that opens a new window corresponding to the selected URL. But, basically, I get an "Object does not contain an 'open' method" error when I execute

window.open(url);

Is there a way around this? I can (and have) created gadgets with anchor tags that successfully open other windows, but doing this same action from javascript appears to not be allowed.

Anything that accomplishes the functionality is fine. A jQuery-based solution would be great.

Thanks.

Answer 1

Due to Caja's sanitization, all the javascript functions are not supported that's why can't open a new window in App Script.

The workaround to display a popup in App Script is to use an overlay window(which is not a popup technically but appears like a popup) like jQuery modal dialog which are supported in App Script.

http://jqueryui.com/dialog/#modal-form

However iframe tags are not supported in App Script, so an attempt to open a url in modal window with the help of iframe tags will not work.

You can read more about these restriction in App Script from the link below :

https://developers.google.com/apps-script/guides/html/restrictions **

Hope it helps!

Answer 2

You can open the link directly by running the window.open() JS in a dialog using the HTMLService.

Here's a demo sheet (take a copy to see the script).

openNewWindow() is assigned to the button.

Code.gs:

function openNewWindow() {

  var htmlString = 
    '<div>' + 
      '<input type="button" value="Close" onclick="google.script.host.close()" />' + 
    '</div>' +
    '<script>window.open("http://www.google.com")</script>';

  var htmlOutput = HtmlService
    .createHtmlOutput(htmlString)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setHeight(60);

  SpreadsheetApp
    .getUi()
    .showModalDialog(htmlOutput, 'Opening New Window...');  
}

Answer 3

It's not possible to do that because of caja sanitization. The options bellow will not work.

1) jquery - $("#some_link_id").click() 2) javascript - window.open, window.href, etc...

The only workaround but I guess that will not fit to your problem is creating links with target="_blank" to open new windows but as I said is not possible to click in these links though javascript/jquery.

<a href="http://www.google.com" id="my_link" class="abc" target="_blank">My Link</a>

Answer 4

I was able to achieve this using a form. On submit, set the action of the form to the desired URL, as determined by the selected item in the select box.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $('document').ready(function(){
       $('#yourForm').attr('onsubmit',null); //set onsubmit to Null for NATIVE Caja sandboxmode

       $('#yourForm').submit(function(){
          var val = $('#yourSelect').val();  //get value of select box
          $('#yourForm').attr('action',val); //set action of form
       });
    });
    </script>
    <div>
    <select id="yourSelect">
       <option value="https://www.google.com">Google</option>
       <option value="https://www.bing.com">Bing</option>
    </select>

    <form id="yourForm" method="get" target="_blank" action="">
    <input type="submit" value="Open Selected">
    </form>

    </div>