Home Carbon Ads Launch Browser Inside Intel XDK App

Launch Browser Inside Intel XDK App

This post is a part 5 of Intel XDK Complete Tutorial post series.

With just one line of code you can open browser inside a Intel XDK app.

//Parameters:
//1. Url of the website.
//2&3. Portrait X and Y position of the close button.
//4&5. Landscape X and Y position of the close button.
//6&7. Height and width of the close button.
intel.xdk.device.showRemoteSiteExt("http://www.google.com/",280,0,50,50,60,60);

//This event is fired when the browser is closed.
window.addEventListener("intel.xdk.device.remote.close", function(){});

The webpage is actually displayed in a new webview. When the close button in the new webview is clicked it returns to the original web view.

This function only works inside event handlers. So you can’t just call it whenever you like to. For example:

document.addEventListener(“intel.xdk.device.ready”,function(){
intel.xdk.device.showRemoteSiteExt(“http://www.google.com/”,280,0,50,50,60,60);
},false);

Make sure you have also added Intel XDK Device plugin in your app.

Narayan Prusty
Hide Status Bar In Intel XDKSending SMS using Intel XDK
Comments: 6
  1. alfredo
    5 years ago

    I need to add a waiting clock until the main page is displayed

    function onDeviceReady() {
    iabRef = window.open(‘http://www.lapango.com/’, ‘status=1′, ‘location=no, hidden=yes’, ‘clearcache=yes’);
    iabRef.addEventListener(‘loadstop’, replaceHeaderImage);
    iabRef.addEventListener(‘exit’, iabClose);

    ReplyCancel
  2. 6 years ago

    hi,

    where to put that code? in html body?

    //Parameters:
    //1. Url of the website.
    //2&3. Portrait X and Y position of the close button.
    //4&5. Landscape X and Y position of the close button.
    //6&7. Height and width of the close button.
    intel.xdk.device.showRemoteSiteExt(“http://www.google.com/”,280,0,50,50,60,60);

    //This event is fired when the browser is closed.
    window.addEventListener(“intel.xdk.device.remote.close”, function(){});

    ReplyCancel
    • 6 years ago

      You put it in app.js file. can call your url by that function.

      ReplyCancel
  3. Christian
    6 years ago

    Hey,

    thank you for the help! I got it working well.

    For all who wonder how to get the icon exactly displayed on top right of your screen:

    var w = window.innerWidth;
    var positionx = w -50;
    intel.xdk. device.showRemoteSiteExt(theurl,positionx,0,positionx,0,50,50);

    Can anyone tell me how i can change the icon for closing the browser?

    Greetings,
    Christian

    ReplyCancel
  4. 6 years ago

    I tried and it worked. If you dont put it in an Event, put it in a function. Eg using JQuery, I used a button to open the browser this way:

    <input type="text" id="link" placeholder="example.com">
    <button id="openbrowser">Open</button>

    The JQuery code

    $(function() {
    $("#openbrowser").click(function() {
    var link = $("#link").val();
    intel.xdk.device.showRemoteSiteExt(link, 280,0,50,50,60,60);
    });
    });

    Try it and see

    ReplyCancel
  5. Chirag
    7 years ago

    @Narayan I copied the code given by you, but it did’nt lunch anything….please help

    ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 6 Comments Cordova
Share this
Related Articles