diff --git a/README.md b/README.md index 47bbac0..31a3c72 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,7 @@ instance, or the system browser. Windows only: - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally. + - __fullscreen__: set to `yes` to create the browser control without a border around it. Please note that if __location=no__ is also specified, there will be no control presented to user to close IAB window. ### Supported Platforms @@ -167,6 +168,10 @@ opened with `target='_blank'`. The rules might look like these } ``` +### Windows Quirks + +Similar to Firefox OS IAB window visual behaviour can be overridden via `inAppBrowserWrap`/`inAppBrowserWrapFullscreen` CSS classes + ### Browser Quirks - Plugin is implemented via iframe, @@ -349,6 +354,10 @@ The function is passed an `InAppBrowserEvent` object. - only __code__ key is supported. +### Windows Quirks + +Due to [MSDN docs](https://msdn.microsoft.com/en-us/library/windows.ui.xaml.controls.webview.invokescriptasync.aspx) the invoked script can return only string values, otherwise the parameter, passed to __callback__ will be `[null]`. + ## insertCSS > Injects CSS into the `InAppBrowser` window. @@ -368,6 +377,7 @@ The function is passed an `InAppBrowserEvent` object. - Amazon Fire OS - Android - iOS +- Windows ### Quick Example diff --git a/plugin.xml b/plugin.xml index 617c736..306781d 100644 --- a/plugin.xml +++ b/plugin.xml @@ -197,6 +197,7 @@ + diff --git a/src/ios/CDVInAppBrowser.m b/src/ios/CDVInAppBrowser.m index 6d141d3..24f56c4 100644 --- a/src/ios/CDVInAppBrowser.m +++ b/src/ios/CDVInAppBrowser.m @@ -975,6 +975,20 @@ @implementation CDVInAppBrowserNavigationController : UINavigationController +- (void) viewDidLoad { + + CGRect frame = [UIApplication sharedApplication].statusBarFrame; + + // simplified from: http://stackoverflow.com/a/25669695/219684 + + UIToolbar* bgToolbar = [[UIToolbar alloc] initWithFrame:frame]; + bgToolbar.barStyle = UIBarStyleDefault; + [self.view addSubview:bgToolbar]; + + [super viewDidLoad]; +} + + #pragma mark CDVScreenOrientationDelegate - (BOOL)shouldAutorotate diff --git a/src/windows/InAppBrowserProxy.js b/src/windows/InAppBrowserProxy.js index da5eb82..817516e 100644 --- a/src/windows/InAppBrowserProxy.js +++ b/src/windows/InAppBrowserProxy.js @@ -34,7 +34,8 @@ var browserWrap, navigationButtonsDivInner, backButton, forwardButton, - closeButton; + closeButton, + bodyOverflowStyle; // x-ms-webview is available starting from Windows 8.1 (platformId is 'windows') // http://msdn.microsoft.com/en-us/library/windows/apps/dn301831.aspx @@ -86,6 +87,8 @@ var IAB = { if (win) win({ type: "exit" }); browserWrap.parentNode.removeChild(browserWrap); + // Reset body overflow style to initial value + document.body.style.msOverflowStyle = bodyOverflowStyle; browserWrap = null; popup = null; } @@ -109,24 +112,25 @@ var IAB = { } else { // "_blank" or anything else if (!browserWrap) { + var browserWrapStyle = document.createElement('link'); + browserWrapStyle.rel = "stylesheet"; + browserWrapStyle.type = "text/css"; + browserWrapStyle.href = urlutil.makeAbsolute("/www/css/inappbrowser.css"); + + document.head.appendChild(browserWrapStyle); + browserWrap = document.createElement("div"); - // First reset all styles for inappbrowser wrapper element - browserWrap.style.cssText = "margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background: 0 0;"; - browserWrap.style.position = "fixed"; - browserWrap.style.top = "0px"; - browserWrap.style.left = "0px"; - browserWrap.style.width = "100%"; - browserWrap.style.height = "100%"; - browserWrap.style.zIndex = 9999; - browserWrap.style.border = "40px solid rgba(0,0,0,0.25)"; + browserWrap.className = "inAppBrowserWrap"; + + if (features.indexOf("fullscreen=yes") > -1) { + browserWrap.classList.add("inAppBrowserWrapFullscreen"); + } // Save body overflow style to be able to reset it back later - var bodyOverflow = document.body.style.msOverflowStyle; + bodyOverflowStyle = document.body.style.msOverflowStyle; browserWrap.onclick = function () { setTimeout(function () { - // Reset body overflow style to initial value - document.body.style.msOverflowStyle = bodyOverflow; IAB.close(win); }, 0); }; @@ -209,7 +213,7 @@ var IAB = { IAB.close(win); }, 0); }); - + if (!isWebViewAvailable) { // iframe navigation is not yet supported backButton.disabled = true; @@ -242,7 +246,10 @@ var IAB = { if (isWebViewAvailable && browserWrap && popup) { var op = popup.invokeScriptAsync("eval", code); - op.oncomplete = function () { hasCallback && win([]); }; + op.oncomplete = function (e) { + var result = [e.target.result]; + hasCallback && win(result); + }; op.onerror = function () { }; op.start(); } @@ -261,15 +268,59 @@ var IAB = { Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) { Windows.Storage.FileIO.readTextAsync(file).done(function (code) { var op = popup.invokeScriptAsync("eval", code); - op.oncomplete = function () { hasCallback && win([]); }; + op.oncomplete = function(e) { + var result = [e.target.result]; + hasCallback && win(result); + }; op.onerror = function () { }; op.start(); }); }); } + }, + + injectStyleCode: function (win, fail, args) { + var code = args[0], + hasCallback = args[1]; + + if (isWebViewAvailable && browserWrap && popup) { + injectCSS(popup, code, hasCallback && win); + } + }, + + injectStyleFile: function (win, fail, args) { + var filePath = args[0], + hasCallback = args[1]; + + filePath = filePath && urlutil.makeAbsolute(filePath); + + if (isWebViewAvailable && browserWrap && popup) { + var uri = new Windows.Foundation.Uri(filePath); + Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).then(function (file) { + return Windows.Storage.FileIO.readTextAsync(file); + }).done(function (code) { + injectCSS(popup, code, hasCallback && win); + }, function () { + // no-op, just catch an error + }); + } } }; +function injectCSS (webView, cssCode, callback) { + // This will automatically escape all thing that we need (quotes, slashes, etc.) + var escapedCode = JSON.stringify(cssCode); + var evalWrapper = "(function(d){var c=d.createElement('style');c.innerHTML=%s;d.head.appendChild(c);})(document)" + .replace('%s', escapedCode); + + var op = webView.invokeScriptAsync("eval", evalWrapper); + op.oncomplete = function() { + callback && callback([]); + }; + op.onerror = function () { }; + op.start(); +} + module.exports = IAB; require("cordova/exec/proxy").add("InAppBrowser", module.exports); diff --git a/www/inappbrowser.css b/www/inappbrowser.css new file mode 100644 index 0000000..4dfb503 --- /dev/null +++ b/www/inappbrowser.css @@ -0,0 +1,42 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.inAppBrowserWrap { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: 0 0; + position: fixed; + top: 0; + left: 0; + width: calc(100% - 80px); + height: calc(100% - 80px); + z-index: 9999999; + border: 40px solid #bfbfbf; + border: 40px solid rgba(0, 0, 0, 0.25); +} + +.inAppBrowserWrapFullscreen { + width: 100%; + height: 100%; + border: 0; +}