github/apache-cordova-plugin-inappbrowser
github/apache-cordova-plugin-inappbrowser
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CB-8432 Correct styles for browser wrapper to display it correctly on some pages

Browse Source 
* Force z-order for wrapper to show it on top of the whole page
* Apply CSS reset rules to browser wrapper
* Disable parent window scrollbars when browser is shown
This commit is contained in:
Vladimir Kotikov 2015-02-05 17:14:41 +03:00
parent ed1227f61a
commit 57f942670c
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/windows/InAppBrowserProxy.js
View File

@ -110,20 +110,30 @@ var IAB = {
// "_blank" or anything else // "_blank" or anything else
if (!browserWrap) { if (!browserWrap) {
browserWrap = document.createElement("div"); browserWrap = document.createElement("div");
browserWrap.style.position = "absolute"; // First reset all styles for inappbrowser wrapper element
browserWrap.style.borderWidth = "40px"; browserWrap.style.cssText = "margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background: 0 0;";
browserWrap.style.width = "calc(100% - 80px)"; browserWrap.style.position = "fixed";
browserWrap.style.height = "calc(100% - 80px)"; browserWrap.style.top = "0px";
browserWrap.style.borderStyle = "solid"; browserWrap.style.left = "0px";
browserWrap.style.borderColor = "rgba(0,0,0,0.25)"; browserWrap.style.width = "100%";
browserWrap.style.height = "100%";
browserWrap.style.zIndex = 9999;
browserWrap.style.border = "40px solid rgba(0,0,0,0.25)";
// Save body overflow style to be able to reset it back later
var bodyOverflow = document.body.style.msOverflowStyle;
browserWrap.onclick = function () { browserWrap.onclick = function () {
setTimeout(function () { setTimeout(function () {
// Reset body overflow style to initial value
document.body.style.msOverflowStyle = bodyOverflow;
IAB.close(win); IAB.close(win);
}, 0); }, 0);
}; };
document.body.appendChild(browserWrap); document.body.appendChild(browserWrap);
// Hide scrollbars for the whole body while inappbrowser's window is open
document.body.style.msOverflowStyle = "none";
} }
if (features.indexOf("hidden=yes") !== -1) { if (features.indexOf("hidden=yes") !== -1) {
@ -131,6 +141,11 @@ var IAB = {
} }
popup = document.createElement(isWebViewAvailable ? "x-ms-webview" : "iframe"); popup = document.createElement(isWebViewAvailable ? "x-ms-webview" : "iframe");
if (popup instanceof HTMLIFrameElement) {
// For iframe we need to override bacground color of parent element here
// otherwise pages without background color set will have transparent background
popup.style.backgroundColor = "white";
}
popup.style.borderWidth = "0px"; popup.style.borderWidth = "0px";
popup.style.width = "100%"; popup.style.width = "100%";
@ -257,4 +272,4 @@ var IAB = {
module.exports = IAB; module.exports = IAB;
require("cordova/exec/proxy").add("InAppBrowser", module.exports); require("cordova/exec/proxy").add("InAppBrowser", module.exports);