Hi i'm working in Xcode v6.1, Cordova v3.7 , jquerymobile v1.4.5
I have a list in which i have urls of external sites. on clicking any site it will open innappbrowser, i want to navigate in innappbrowser page. for instance i am in index page and after clicking or registeration page how can i get the current url from InnAppBrowser. I know the innAppBrowser exit event but couldnt find current url. here the code
function innAppInit(_url) {
try {
app.Log('browser news link=' + _url);
if (_url == null) {
_url = 'http://apache.org';
}
var ref = window.open(encodeURI(_url), '_blank', 'location=no');
console.Dir(ref);
ref.addEventListener('loadstart', function(event) {
$('.ui-loader').hide();
});
ref.addEventListener('exit', function(event) {
alert('exit');
console.Dir(this);
// **how to get current url here;**
});
} catch (e) {
console.log(e);
}
}
You have it in the event of the loadstart, just take it:
var ref = window.open(encodeURI(_url), '_blank', 'location=no');
ref.addEventListener('exit', function()
{
alert(event.url); // here you have the URL
});
See Cordova docs for more info
Related
I'm trying to post a message using the postMessage function to a browser that I've opened using window.open and while I've found a couple of articles explaining on how to do it:
Window.postMessage()
HTML5’s window.postMessage API
I just can't get it to work.
In my grid, when double clicking on a row, I call the following code:
var win = window.open('#Url.Action("Index", "StandaloneViewer")', '_blank',
'width=600,height=800,scrollbars=yes');
var domainOrigin = document.location.origin;
var message = 'My Message';
win.postMessage(message, domainOrigin);
and in my Index.cshtml, I've got the following:
$(document).ready(function () {
window.addEventListener('message', function (event) {
debugger;
var domainOrigin = document.origin;
var domainPath = document.location.href;
if (event.origin !== domainOrigin) return;
...
}, false);
});
I've also tried the same code in the load event:
$(window).on("load", function () {
window.addEventListener('message', function (event) {
debugger;
var domainOrigin = document.origin;
var domainPath = document.location.href;
if (event.origin !== domainOrigin) return;
...
}, false);
});
but to no avail! Any ideas what I may be missing? I've got the same scenario working just fine when sending a message to an iframe but I have a use case where I need to launch a separate browser and send a message to it.
I'm currently testing this on the latest version of Chrome.
Thanks.
I am working in a cordova project and I am very new to cordova.
In that I have an requirement is like I am calling a url in the InAppbrowser . If the network connection is very slow(i.e. 20Kbps/ 50Kbps) I have to show an alert that ’Network slow’. Here I am using the setTimeout function and also I am checking the internet connection. But my problem is if internet connection is there the setTimeout function also calling after 20 secs.
I want to check only if internet connection is slow or else once my InAppbrowser load with url my setTimeout function should not call. Could anypne please help to resolve this issue. My code is like this.....
if(cid == null){
curl = “some url”;
//ref = cordova.InAppBrowser.open(curl, '_blank', 'location=no,hardwareback=yes');
ref = cordova.InAppBrowser.open(curl, '_blank', 'location=no,hardwareback=yes');
setTimeout(function(){
//alert("Hello");
if( startEndedVar == true)
{
ref = cordova.InAppBrowser.open(curl, '_blank', 'location=no,hardwareback=yes');
}
else{
ref = cordova.InAppBrowser.open("settings.html", '_blank', 'location=no,hardwareback=yes');
}
}, 3000);
ref.addEventListener('loadstart', function() {
//alert('laoding started');
});
ref.addEventListener('loadstop', function() {
startEndedVar = true;
//alert('laoding ended');
});
ref.addEventListener('exit', function(event){
screen.orientation.lock('portrait').then(function(obj) {
console.log(obj);
}, function(obj) {
console.log(obj);
});
});
}
Thanks in advance
It's because you have the same order twice: ref = cordova.InAppBrowser.open(curl, '_blank', 'location=no,hardwareback=yes');. Thanks to the if and else your going to open a window in each mode, also your TimeOut is called aufer 30s and not after 20s.
I'm not sure if there are some deeper problems in the logic.
We’re currently developing an app with cordova and the InAppBrowser plugin. We're trying to spawn two different IAB instances at the same time. One with the _system browser and another with the _blank option.
The problem we have is that once we open the instance of _system browser, it seems we lose the reference to the previous browser. For this reason, the close event never triggers on the _blank IAB after the _system browser is closed.
This is how the actual code looks like.
// Opening iab main window
var ref = window.open(global.chat_mediador, '_blank','location=no,toolbar=yes');
var handleEvents = function(event) {
// Closing the iab window
if (event.url.match('#close')) {
ref.close();
}
// Trigger custom event
if (event.url.match('#openccard')) {
window.open('https://www.test.example.url.com?customerID=' + event.customerId, '_system', 'location=yes');
}
}
// InAppBrowser events
// This events are duplicated because loadstop works on android and
// loadstart works on ios.
ref.addEventListener('loadstart', handleEvents, false);
ref.addEventListener('loadstop', handleEvents, false);
// Removing the dialog when we close the chat
ref.addEventListener('exit', function(event) {
generali.dialog.close();
}, false);
As you can see we open the first url within the application with the _blank option. Then if in the child application a button is pressed we want to open an instance of a browser in the _system browser.
We’ve tried (without luck) to:
Have a separate reference for the _system browser.
window.open(global.url_ficha + customerId, '_system','location=no');
var cardsRef = window.open(
'https://www.test.example.url.com?customerID=' + customerId,
'_system',
'location=yes'
);
Trigger a custom event outside the reference of the _blank browser
if (event.url.match('openccard')) {
var customerId = event.url.split('openccard-')[1];
var evt = document.createEvent("Event");
evt.initEvent("openccard",true,true);
evt.customerId = customerId;
document.dispatchEvent(evt);
}
Anyone has an idea of what's happening?
It seems that you need to initialize the IAB each time you do a new window.open() if you don't do that the event listeners don't work.
If I use that code it works like a charm.
window.openIAB = function(url, target, options) {
var self = this;
var ref = window.open(url, target, options);
var handleChildEvents = function(ev) {
if (ref != undefined) {
// Closing the iab window
if (ev.url.match('#close')) {
ref.close();
ref = undefined;
}
// Opening card url with system browser
if (ev.url.match('#openccard')) {
var customerId = ev.url.split('#openccard-')[1];
self.ref2 = self.openIAB(
'https://www.test.com?customerID=' + customerId,
'_system',
'location=yes'
);
}
} else {
console.log('InAppBrowser has no reference');
}
};
ref.addEventListener('loadstart', handleChildEvents);
ref.addEventListener('loadstop', handleChildEvents);
ref.addEventListener('loaderror', function(ev) {
console.log('error while loading page');
ref.close();
ref = undefined;
});
ref.addEventListener('exit', function(ev) {
dialog.close();
});
return ref;
};
I like to add innerhtml content(Just Anchor Link) when an external website is opened.
Below code is used to open the external site in inAppBrowser.
var ref = window.open(url, '_blank', 'location=yes');
I tried with below code to add the innerhtml but its not adding the content to the opened website. Can you please suggest an solution?
ref.addEventListener('loadstop', function() {
//Page loaded! some code here..
ref.executeScript({
code: "var evaluateFeedback =
function() {
return 'Done';
};
"},
function(data) {
ref.document.body.innerHTML =
"<b>Hello, stackoverflow! < /
b > ";
}
);
});
ref is a reference to the inAppBrowser object, you can't do ref.document.body.innerHTML because the inAppBrowser object doesn't have a document property
You are using executeScript in the wrong way, the code you want to inject is the code on the code param.
If you do it this way it will work:
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes,toolbarposition=top');
ref.addEventListener('loadstop', function() {
ref.executeScript({code: "document.body.innerHTML = '<b>Hello, stackoverflow!</b>';"});
});
But that will replace your website content with just the Hello, stackoverflow! message, if you want to append it, you should use
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes,toolbarposition=top');
ref.addEventListener('loadstop', function() {
ref.executeScript({code: "document.body.innerHTML = document.body.innerHTML +'<b>Hello, stackoverflow!</b>';"});
});
Hi I'm trying to use modernizer load (yepnope.js) to conditionally load history.js (via AJAX) only when the browser does not natively support the HTML5 history API....
However in my tests on IE9/IE8 modernizer appears to load the history.js file successfully (at least I can see the HTTP request in the IE9 developer tools) However i still get an error (unrecognised method) when I try to use history.pushState or History.pushState.... can anyone suggest why this might be?
Modernizr.load([{
//test
test : Modernizr.history,
//if yes then do nothing as nothing extra needs loading....
//if no then we need to load the history API via AJAX
nope : ['/js/asm/vendor/history.js'],
complete : function() {
Tabs.init();
}
}])
var Tabs = {
init: function() {
this.bindUIfunctions();
this.pageLoadCorrectTab();
},
bindUIfunctions: function() {
.......
},
changeTab: function(hash) {
var anchor = $("[href='" + hash + "']");
var div = $(hash);
function displayTab(anchortab) {
// activate correct anchor (visually)
........
}
displayTab(anchor);
// update history stack adding additional history entries.
if (typeof history.pushState !== "undefined") {
// pushState is supported!
window.history.pushState(null, null, hash);
} else {
//use history API instead
History.pushState(null, null, hash);
}
//We also need to handle the backstate by telling the brower to trigger the tab behaviour!
window.addEventListener("popstate", function(e) {
anchor = $('[href="' + document.location.hash + '"]');
if (anchor.length) {
displayTab(anchor);
} else {
defaultAnchor = $('.transformer-tabs li.active a');
displayTab(defaultAnchor);
}
});
// Close menu, in case mobile
},
// If the page has a hash on load, go to that tab
pageLoadCorrectTab: function() {
......
},
toggleMobileMenu: function(event, el) {
......
}
}
I found I got on much better with the following lib (although IE8 still does not allow me to use the back and forward browser button to go between tabs).... at least there are no JS errors and it works for me in IE9 https://github.com/devote/HTML5-History-API
Modernizr.load([{
//test
test : Modernizr.history,
//if yes then do nothing as nothing extra needs loading....
//if no then we need to load the history API via AJAX
nope : ['/js/asm/vendor/history.min.js'],
complete : function() {
var location = window.history.location || window.location;
Tabs.init();
}
}])
//responsive tabs API code.
var Tabs = {
init: function() {
this.bindUIfunctions();
this.pageLoadCorrectTab();
},
bindUIfunctions: function() {
// Delegation
$(document)
.on("click", ".transformer-tabs a[href^='#']:not('.active')", function(event) {
Tabs.changeTab(this.hash);
event.preventDefault();
})
.on("click", ".transformer-tabs a.active", function(event) {
Tabs.toggleMobileMenu(event, this);
event.preventDefault();
});
},
changeTab: function(hash) {
var anchor = $("[href='" + hash + "']");
function displayTab(anchortab) {
var url = anchortab.attr("href");
console.log("url" + url);
var div = $(url);
// activate correct anchor (visually)
anchortab.addClass("active").parent().siblings().find("a").removeClass("active");
// activate correct div (visually)
div.addClass("active").siblings().removeClass("active");
anchortab.closest("ul").removeClass("open");
}
displayTab(anchor);
// update history stack adding additional history entries.
// pushState is supported!
history.pushState(null, null, hash);
//We also need to handle the backstate by telling the brower to trigger the tab behaviour!
$(window).on('popstate', function(e) {
anchor = $('[href="' + document.location.hash + '"]');
if (anchor.length) {
displayTab(anchor);
} else {
defaultAnchor = $('.transformer-tabs li.active a');
displayTab(defaultAnchor);
}
});
// Close menu, in case mobile
},
// If the page has a hash on load, go to that tab
pageLoadCorrectTab: function() {
this.changeTab(document.location.hash);
},
toggleMobileMenu: function(event, el) {
$(el).closest("ul").toggleClass("open");
}
}