I am developing Phonegap application and currently i am using InAppBrowser to display external pages. On some of the external pages I place a close button and i want to close the InAppBrowser itself. because InAppBrowser displays these pages that is why the reference of it is not accessed on itself to close it and Please do not suggest me to use ChildBrowser Plugin.
window.close(); //Not Worked for me
or
iabRef.close(); //Also not Worked for me because iabRef is not accessible on InAppBrowser. It is created on Parent Window
Some of the Android device and iOS device display a Done Button to close it. As well as the iPad also display the Done button. but in Case of Android tablet there is not any kind of button to close it.
UPDATE :-
Here is my full code :-
var iabRef = null;
function iabLoadStart(event) {
}
function iabLoadStop(event) {
}
function iabClose(event) {
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('exit', iabClose);
}
function startInAppB() {
var myURL=encodeURI('http://www.domain.com/some_path/mypage.html');
iabRef = window.open(myURL,'_blank', 'location=yes');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.addEventListener('exit', iabClose);
}
This worked for me:
var win=window.open( "myurl", "_blank");
win.addEventListener( "loadstop", function(){
var loop = window.setInterval(function(){
win.executeScript({
code: "window.shouldClose"
},
function(values){
if(values[0]){
win.close();
window.clearInterval(loop);
}
}
);
},100);
});
In your called window, simply do:
window.shouldClose=true
When you want to close it
There's a solution provided in this blog post:
cross window communication with cordova's inappbrowser
Essentially, you could use executeScript() from the parent window to the InAppBrowser instance over and over (once or twice a second, for example), to check whether a value in the IAB has been set. Pressing the "close" button in IAB could set such a variable.
When the parent window discovers that the variable has been set in the IAB, the parent window uses the IAB reference to close() it.
There is a SO post here that describes how to do this.
You basically have to get a reference to the inapp browser by calling window.open and hook into the loadstop event. In the loadstop event check to see if the url contains a predefined path (like mobile/close - but could be anything) and then call call close.
Here is the post
https://stackoverflow.com/a/15981972/54805
Related
I have a small application that opens a new popup. I store the window in a variable:
popup = window.open("sites/display.html", "_blank");
After that I add a beforeunload Eventlistener:
$(popup).on('beforeunload', function(){
// Do something
});
I then later reload the window with a button:
popup.location = popup.location;
After that if I close the window the Event beforeunload isn't fired anymore. I think it has something to do with the reload because if I dont reload the page everything works fine.
How can I fix this so the event is fired everytime the window closes?
Exact code I use:
function startClock(allowRestart) {
saveSettings(allowRestart);
if ($("#separated-display").is(":checked")) {
// Separated mode activated
if (popup == undefined) {
openPopup();
} else {
if (popup.closed) {
openPopup();
}else{
popup.location.reload();
}
}
} else {
// Separated mode deactivated
if (popup != null && popup.closed == false) {
$(popup).unbind();
popup.close();
}
window.location = "sites/display.html"; // Open the clock in same window
}
}
function openPopup(){
// Open new popup window
popup = window.open("sites/display.html", "_blank");
// TO-DO: Fix event not fired after 1. window reload 2. window close
popup.addEventListener('beforeunload', function(){
console.log("unload");
});
}
As you're trying to access the same origin (with the relative path) window using window.open(), Access error shouldn't be displayed.
popup = window.open("/sites/display.html", "_blank")
popup variable would refer to the newly created window which is a thin wrapper representing a WindowProxy object, which indeed has all features of window available.
When the page reloads everything is set to default, and the window loses its properties set before. Therefore, the unload event attached earlier is not anymore attached. This would happen for other events as well.
Hence the problem here that the event is being attached to the popup window just once on opening the popup, which is reset on page reload. The best way to go forward would be to add the unload event in the js file which loads specifically on sites/display.html page. There, every time when sites/display.html page loads you could access the new window object and attach events in window.load / document.ready (according to your use case).
You won't able to attach the event to pop up before or after invoking page reload as you're doing it currently as, the property would be reset if you try setting it before/after page reload as it might be executed asynchronously.
NOTE:
You should rather use the reload() function exposed by window.location instead of updating the location property. As updating the property doesn't skip browser cache.
popup.location.reload()
The support for window.open is unknown for most browsers, though I was able to use it on Chrome 84.
Is there a way to close the in app browser? window.close is only working on iOS device, and it doesn't work in Android. I've tried using window.top.close and window.open("","_self") window.close and none of it is working. I've tried to look for which browser does Viber and Line use internally but they don't have any documentation
You can try this:
var win=window.open( "myurl", "_blank");
win.addEventListener( "loadstop", function(){
var loop = window.setInterval(function(){
win.executeScript({
code: "window.shouldClose"
},
function(values){
if(values[0]){
win.close();
window.clearInterval(loop);
}
}
);
},100);
});
In your called window, simply do this, When you want to close it
window.shouldClose=true
I am adding this just for future references. You can set window.location.href to Viber deep link like viber://pa?chatURI=<URI> to navigate back to chat window. Here is the doc page.
Basically, I want the current browser tab to be closed on a click of a button. How do I implement this in ReactJS? Tried window.close() but did not work.
For security purposes, JavaScript can't close a window that it didn't directly open.
https://developer.mozilla.org/en-US/docs/Web/API/Window/close
As you can see from the example, the originating script (which opened the window) must also be the script that closes the window. A new window isn't capable of closing itself via JavaScript.
//Global var to store a reference to the opened window
var openedWindow;
function openWindow() {
openedWindow = window.open('moreinfo.htm');
}
function closeOpenedWindow() {
openedWindow.close();
}
On your click event handler, try this :
window.open("", "_self");
window.close();
I need to open an external page from my Phonegap app. I need to make it compatible with at least Android and iOS.
I have this code to open the external page
**var ref = window.open('http://mysite.com/', '_blank', 'location=no');**
lastPageLoaded = ref;
ref.addEventListener('loadstop', function (event) {
try {
alert('executing...');
var retVal = lastPageLoaded.executeScript(
{
code: "alert('got here!');"
}, function () {
});
}
catch (exception) {
alert(exception);
}
});
I also have this in my config.xml file:
<access origin="*" />
The code above invokes the InAppBrowser an correctly opens my external page. BUT, the InAppBrowser is not in fullscreen mode which is not good for my app.
I noticed that if I make a slight change to the bolded (that is, the text decorated with ** ) line above to this:
var ref = window.open('http://mysite.com/', **'_self'**, 'location=no');
than InAppBrowser is not invoked but the external page opens in full mode, as my entire app is, which is good!
However, adding the event listener won't work:
ref.addEventListener('loadstop', function (event)
I mean, my code never gets to execute this line:
code: "alert('got here!');"
Seems logical because now I am not running under InAppBrowser context, but I need one of two solutions:
1. Make InAppBrowser run in fullscreen mode and keep my existing event handler
2. Find a similar event to hook to so I can invoke the script on the loaded external page.
Is it possible to achieve this?
I am working with IE9. Want to open a popup window from a page, and from the popup, how to call the javascript code in the page (not the popup window)?
There will not be a cross domain issue as I am going to load a page from the same domain of the page into the popup window.
Like Cory said, use window.opener to get the parent window's window. Look at this:
http://jsfiddle.net/Dmnqk/
function openPopup() {
var w = window.open("", "");
w.document.open();
w.document.write("<script type='text/javascript'>window.opener.parentWindowFunction();<\/script>");
w.document.close();
}
function parentWindowFunction() {
alert("called");
}
Of course, my use of document.open/write/close is simply to create my own page that calls the parent window's function (technically, it should really have <html><head></head><body>SCRIPT HERE</body></html>. All your popup's page would need is the call to window.opener.parentWindowFunction.
You can use window.opener to access functions in the global (window) namespace of the page that opened the popup:
Opener
function functionFromOpener() {
return "wharrgarbl";
}
Popup
alert(window.opener.functionFromOpener());
Obligatory jsFiddle example: http://jsfiddle.net/9yLu2/1/
That said, I think it's a better idea to use in-page DHTML dialogs. (Or possibly it's that browser windows that aren't resizeable / don't have address bars bug me that much.)