blob: 56a50144ab8d1eb2f5701c039d38a7f71513b6b2 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="description" content=" ">
<title>
window.open - Apache Cordova
</title>
<link rel="SHORTCUT ICON" href="/favicon.ico"/>
<link rel="canonical" href="https://cordova.apache.org/docs/en/latest/cordova/inappbrowser/window.open.html">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
<!-- Fonts -->
<!-- For attribution information, see www/attributions.html -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var disqus_developer = 1; // this would set it to developer mode
</script>
<!-- JS -->
<script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<header>
<a class="scroll-point pt-top" name="top"></a>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav_bar_center">
<ul class="nav navbar-nav">
<li class="active">
<a href="/docs/en/latest/">Documentation</a>
</li>
<li >
<a href="/plugins">Plugins</a>
</li>
<li >
<a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
</li>
<li >
<a href="/contribute">Contribute</a>
</li>
<li >
<a href="/contribute/team.html">Team</a>
</li>
<li>
<a href="/#getstarted">Get Started</a>
</li>
<li>
<form class="navbar-form navbar-right" id="header-search-form" role="search">
<div class="input-group">
</div>
</form>
</li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
</header>
<div class="docs">
<!-- Table of Contents -->
<div class="hidden-xs hidden-sm site-toc-container">
<ul class="site-toc">
<li>
<a class="" href="/docs/en/2.5.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/accelerometer/accelerometer.html">
Accelerometer
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/camera/camera.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/media/capture/capture.html">
Capture
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/compass/compass.html">
Compass
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/connection/connection.html">
Connection
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/contacts/contacts.html">
Contacts
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/device/device.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/file/file.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/geolocation/geolocation.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/globalization/globalization.html">
Globalization
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/inappbrowser/inappbrowser.html">
InAppBrowser
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/media/media.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/notification/notification.html">
Notification
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/splashscreen/splashscreen.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/storage/storage.html">
Storage
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/getting-started/index.html">
Getting Started Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/command-line/index.html">
Command-Line Usage
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/upgrading/index.html">
Upgrading Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/project-settings/index.html">
Project Settings
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/plugin-development/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/whitelist/index.html">
Domain Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/cordova-webview/index.html">
Embedding WebView
</a>
</li>
</ul>
</div>
<!-- Page content -->
<div class="page-content-container">
<div class="page-content">
<div class="content-header">
<!-- ToC Dropdown (for XS and SM sizes only) -->
<div class="toc-dropdown dropdown visible-xs-block visible-sm-block">
<button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Table of Contents
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="" href="/docs/en/2.5.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/accelerometer/accelerometer.html">
Accelerometer
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/camera/camera.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/media/capture/capture.html">
Capture
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/compass/compass.html">
Compass
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/connection/connection.html">
Connection
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/contacts/contacts.html">
Contacts
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/device/device.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/file/file.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/geolocation/geolocation.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/globalization/globalization.html">
Globalization
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/inappbrowser/inappbrowser.html">
InAppBrowser
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/media/media.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/notification/notification.html">
Notification
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/splashscreen/splashscreen.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/cordova/storage/storage.html">
Storage
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/getting-started/index.html">
Getting Started Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/command-line/index.html">
Command-Line Usage
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/upgrading/index.html">
Upgrading Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/project-settings/index.html">
Project Settings
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/plugin-development/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/whitelist/index.html">
Domain Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.5.0/guide/cordova-webview/index.html">
Embedding WebView
</a>
</li>
</ul>
</div>
<a class="edit" href="https://github.com/apache/cordova-docs/tree/master/www/docs/en/2.5.0/cordova/inappbrowser/window.open.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a>
<!-- Version dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2.5.0
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
<!-- List versions available in this language -->
<li>
<a href="/docs/en/dev/" class="missing-page">
dev
</a>
</li>
<li>
<a href="/docs/en/latest/cordova/inappbrowser/window.open.html" class="">
12.x
(Latest)
</a>
</li>
<li>
<a href="/docs/en/11.x/" class="missing-page">
11.x
</a>
</li>
<li>
<a href="/docs/en/10.x/" class="missing-page">
10.x
</a>
</li>
<li>
<a href="/docs/en/9.x/" class="missing-page">
9.x
</a>
</li>
<li>
<a href="/docs/en/8.x/" class="missing-page">
8.x
</a>
</li>
<li>
<a href="/docs/en/7.x/" class="missing-page">
7.x
</a>
</li>
<li>
<a href="/docs/en/6.x/" class="missing-page">
6.x
</a>
</li>
<li>
<a href="/docs/en/5.4.0/" class="missing-page">
5.4.0
</a>
</li>
<li>
<a href="/docs/en/5.1.1/" class="missing-page">
5.1.1
</a>
</li>
<li>
<a href="/docs/en/5.0.0/" class="missing-page">
5.0.0
</a>
</li>
<li>
<a href="/docs/en/4.0.0/" class="missing-page">
4.0.0
</a>
</li>
<li>
<a href="/docs/en/3.6.0/" class="missing-page">
3.6.0
</a>
</li>
<li>
<a href="/docs/en/3.5.0/" class="missing-page">
3.5.0
</a>
</li>
<li>
<a href="/docs/en/3.4.0/" class="missing-page">
3.4.0
</a>
</li>
<li>
<a href="/docs/en/3.3.0/" class="missing-page">
3.3.0
</a>
</li>
<li>
<a href="/docs/en/3.2.0/" class="missing-page">
3.2.0
</a>
</li>
<li>
<a href="/docs/en/3.1.0/" class="missing-page">
3.1.0
</a>
</li>
<li>
<a href="/docs/en/3.0.0/" class="missing-page">
3.0.0
</a>
</li>
<li>
<a href="/docs/en/2.9.0/" class="missing-page">
2.9.0
</a>
</li>
<li>
<a href="/docs/en/2.8.0/" class="missing-page">
2.8.0
</a>
</li>
<li>
<a href="/docs/en/2.7.0/" class="missing-page">
2.7.0
</a>
</li>
<li>
<a href="/docs/en/2.6.0/" class="missing-page">
2.6.0
</a>
</li>
<li>
<a href="/docs/en/2.5.0/" class="missing-page">
<span class="selected">
2.5.0
</span>
</a>
</li>
<li>
<a href="/docs/en/2.4.0/" class="missing-page">
2.4.0
</a>
</li>
<li>
<a href="/docs/en/2.3.0/" class="missing-page">
2.3.0
</a>
</li>
<li>
<a href="/docs/en/2.2.0/" class="missing-page">
2.2.0
</a>
</li>
<li>
<a href="/docs/en/2.1.0/" class="missing-page">
2.1.0
</a>
</li>
<li>
<a href="/docs/en/2.0.0/" class="missing-page">
2.0.0
</a>
</li>
<li>
<a href="/docs/en/1.9.0/" class="missing-page">
1.9.0
</a>
</li>
<li>
<a href="/docs/en/1.8.1/" class="missing-page">
1.8.1
</a>
</li>
<li>
<a href="/docs/en/1.8.0/" class="missing-page">
1.8.0
</a>
</li>
<li>
<a href="/docs/en/1.7.0/" class="missing-page">
1.7.0
</a>
</li>
<li>
<a href="/docs/en/1.6.1/" class="missing-page">
1.6.1
</a>
</li>
<li>
<a href="/docs/en/1.6.0/" class="missing-page">
1.6.0
</a>
</li>
<li>
<a href="/docs/en/1.5.0/" class="missing-page">
1.5.0
</a>
</li>
</ul>
</div>
</div>
<!-- Show warnings for special versions -->
<!-- dev warning -->
<!-- outdated warning -->
<div class="alert docs-alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This version of the documentation is outdated!
<a href="/docs/en/latest/cordova/inappbrowser/window.open.html">
Click here for the latest released version.
</a>
</div>
<!-- plugin version warning -->
<div id="page-toc-source">
<h1>window.open</h1>
<p>Opens a URL in a new <a href="inappbrowser.html">InAppBrowser</a> instance, the current browser instance, or the system browser.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var ref = window.open(url, target, options);
</code></pre></div></div>
<ul>
<li><strong>ref:</strong> reference to the <a href="inappbrowser.html">InAppBrowser</a> window (<code>[InAppBrowser](inappbrowser.html)</code>)</li>
<li><strong>url:</strong> the URL to load (<code>String</code>). Call encodeURI() on this if you have Unicode characters in your URL.</li>
<li>
<p><strong>target:</strong> the target to load the URL in (<code>String</code>) (Optional, Default: &quot;_self&quot;)</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> _self - opens in the Cordova WebView if url is in the white-list, else it opens in the InAppBrowser
_blank - always open in the InAppBrowser
_system - always open in the system web browser
</code></pre></div> </div>
</li>
<li>
<p><strong>options:</strong> options for the <a href="inappbrowser.html">InAppBrowser</a> (<code>String</code>) (Optional, Default: &quot;location=yes&quot;)</p>
<p>The options string must not contain any blank space, each feature name and value must be separated by a comma. Feature names are case insensitive. Only the value below is supported on all platforms:</p>
<ul>
<li><strong>location</strong> - set to &#39;yes&#39; or &#39;no&#39; to turn the location bar on or off for the InAppBrowser</li>
</ul>
<p>iOS only
&#8212;&#8212;--</p>
<ul>
<li><strong>enableViewportScale</strong> - set to &#39;yes&#39; or &#39;no&#39; to prevent viewport scaling through a meta tag (defaults to &#39;no&#39;)</li>
<li><strong>mediaPlaybackRequiresUserAction</strong> - set to &#39;yes&#39; or &#39;no&#39; to not allow autoplayed HTML5 video (defaults to &#39;no&#39;)</li>
<li><strong>allowInlineMediaPlayback</strong> - set to &#39;yes&#39; or &#39;no&#39; to allow inline HTML5 media playback, also, the video element in the HTML document must also include the webkit-playsinline attribute (defaults to &#39;no&#39;)</li>
<li><strong>keyboardDisplayRequiresUserAction</strong> - set to &#39;yes&#39; or &#39;no&#39; to open the keyboard when form elements get focus via the JavaScript focus() call (defaults to &#39;yes&#39;)</li>
<li><strong>suppressesIncrementalRendering</strong> - set to &#39;yes&#39; or &#39;no&#39; to wait until all new view content has been received before it is rendered (defaults to &#39;no&#39;)</li>
<li><strong>presentationstyle</strong> - set to &#39;pagesheet&#39;, &#39;formsheet&#39; or &#39;fullscreen&#39; to set the <a href="http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalPresentationStyle">presentation style</a> (defaults to &#39;fullscreen&#39;)</li>
<li><strong>transitionstyle</strong> - set to &#39;fliphorizontal&#39;, &#39;crossdissolve&#39; or &#39;coververtical&#39; to set the <a href="http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalTransitionStyle">transition style</a> (defaults to &#39;coververtical&#39;)</li>
</ul>
</li>
</ul>
<h2>Supported Platforms</h2>
<ul>
<li>Android</li>
<li>iOS</li>
<li>BlackBerry 10</li>
<li>Windows Phone 7 + 8</li>
</ul>
<h2>Quick <a href="../storage/storage.opendatabase.html">Example</a></h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var ref = window.open('http://apache.org', '_blank', 'location=yes');
var ref2 = window.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');
</code></pre></div></div>
<h2>Full <a href="../storage/storage.opendatabase.html">Example</a></h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;window.open Example&lt;/title&gt;
&lt;script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// external url
var ref = window.open(encodeURI('http://apache.org'), '_blank', 'location=yes');
// relative document
ref = window.open('next.html', '_self');
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div></div>
</div>
</div>
<div class="row">
<div class="blue-divider"></div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<h1>More Resources</h1>
<div class="row">
<div class="col-sm-4">
<h2>General</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
</li>
<li>
<a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/licenses">License</a>
</li>
<li>
<a href="/artwork">Artwork</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h2>Development</h2>
<ul class="nav">
<li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&amp;q=cordova-">Source Code</a></li>
<li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li>
<li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
<li><a href="/contact">Mailing List</a></li>
<li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
</ul>
</div>
<div class="col-sm-4">
<h2>Apache Software Foundation</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://www.apache.org/">About ASF</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/events/current-event">Events</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/security/">Security</a>
</li>
<li>
<a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<h1>Contribute</h1>
<p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
<p>Report bugs, improve the docs, or contribute to the code.</p>
<a href="/contribute" class="btn btn-lg btn-primary">
Learn More
</a>
<p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
</div>
</div>
<p class="copyright_text">
Copyright &copy; 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/>
Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
<br/>
<p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p>
</p>
</div>
</footer>
</div>
</div>
</div>
<script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script>
<script defer type="text/javascript" src="/static/js/docs.js"></script>
<script defer type="text/javascript" src="/static/js/index.js"></script>
<script defer type="text/javascript" src="/static/js/twitter.js"></script>
</body>
</html>