I am trying to build app with WebView and click/tap events on URL-s inside WebView. Solution below opens external browser and URL but it loads same url content in webview as well. Is there a way to prevent loading new url inside webview?
Here is my code sample.
function onWebViewLoaded(webargs) {
const page = webargs.object.page;
const vm = page.bindingContext;
const webview = webargs.object;
webview.on(webViewModule.WebView.loadFinishedEvent, (args) => {
let message = "Loading in progress....";
if (!args.error) {
message = `WebView loading finished with url: ${args.url}`;
} else {
message = `Error received ${args.url} : ${args.error}`;
}
if (args.url.indexOf('http://') === 0) {
// Stop the loading url first... but how..
// Open URL in external default browser
utilityModule.openUrl(args.url);
}
});
}
I have tried with setting a flag isUserInteractionEnabled="false" added to my xml view but then all interactions are disabled. Does someone knows how to do this?
Try with loadStartedEvent
webview.on(webViewModule.WebView.loadStartedEvent, (args) => {
if(!args.url.includes("whatever.net")){
webview.stopLoading();
utilsModule.openUrl(args.url);
}
});
This way we catch the loadStartedEvent instead of loadFinishedEvent (where the url is already loaded), we check the url if we want to filter depending on it, and here we can webview.stopLoading() for stop the page load.
Related
I pulling my hair out trying to figure out where I have gone wrong.
I created a very simple app for ios that uses webView to load certain webpages within app. from my knowledge and every ios air webView reference I have found online I have coded everything correctly. Runs beautifully on android.
apple app review says every tab and/or button launches mobile Safari.?
I don't see how this is possible because they even said my button that only has gotoAndPlay(2); apparently that navigates to Safari also. ?
here's the code I used for webView:
QMBTN.addEventListener(MouseEvent.CLICK, QMB);
function QMB(event:MouseEvent):void
{
webView.viewPort = new Rectangle( 0, 135, stage.stageWidth, 600 );
webView.stage = this.stage;
webView.loadURL( "http://mywebpageeurl.com.au" );
whiteBOX.gotoAndStop(2);
}
and this is the code for my internal frame nav.
Menu_BTN2.addEventListener(MouseEvent.CLICK, GoMenuSRC);
function GoMenuSRC(event:MouseEvent):void
{
webView.stage = null;
whiteBOX.gotoAndStop(1);
}
Am I missing something or ????
The only other thing I could think could be the culprit might be my error handler to handle errors when I click tel: or mailto: links on my webpages.
The code for the tel: / mailto: error handling.
// Error handle
var openLinksInDefaultBrowser = false;
//Check tel: func
function cdCTfunc():void
{
var NEWtelLNK = webView.location.substr(0,4);
if (NEWtelLNK=='tel:')
{
openLinksInDefaultBrowser = true;
}else{openLinksInDefaultBrowser = false;}
}
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, function (ev:LocationChangeEvent):void
{
cdCTfunc();
if(openLinksInDefaultBrowser == false)
{
ev.preventDefault();
webView.loadURL(ev.location); //'ev.url' changed to 'ev.location'started with prerelease build - [07/20/10]
}
if (openLinksInDefaultBrowser == true)
{
trace('page loaded in default browser');
var phStr:String=ev.location;
var callPH:URLRequest= new URLRequest(phStr);
navigateToURL(callPH);
}
});
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, function (ev:LocationChangeEvent):void
{
if (webView.location.indexOf('authentication_complete') != -1)
{
trace('auth token is: ' + webView.location.substr(webView.location.indexOf('token=') + 6));
}
trace('the new location is: ' + webView.location);
trace(webView.location.substr(0,4));
});
webView.addEventListener('complete', function(ev:Event):void
{
trace('complete event');
});
webView.addEventListener('error', function(ev:ErrorEvent):void
{
var phStr:String=webView.location;
var callPH:URLRequest= new URLRequest(phStr);
navigateToURL(callPH);
webView.isHistoryBackEnabled;
webView.historyBack();
trace('SOME Bloody Error Loading The Page: ' + ev.text);
trace(openLinksInDefaultBrowser);
});
but I still don't see how this could cause a gotoAndStop(); to launch safari.
I am absolutely stumped.
Please Help?
Thank you in advance.
Before submitting your app for review you should run it through Testflight.
This allows you to test an 'AppStore' build of your binary so you will see exactly what the reviewer will see.
http://www.yeahbutisitflash.com/?p=7608
I am working on a Chrome app that switches between medias shown in a webview tag. The medias must be updated when they change on my web server and it must keep playing when the internet or the server go down. My solution was to play the media from a programmatically managed local cache.
I programmed the Chrome app to download the content with webkitRequestFileSystem into persistent local storage and I try to access the files from there. The content ends up with URLs like this filesystem:chrome-extension://kbjjicmijilgpdpkicpbnceofdpfbjcb/persistent/my_file.html.
No matter what I do, I cannot access the local files. Neither the webview nor navigating directly to the file displays it in Chrome. It only shows a ERR_FILE_NOT_FOUND error.
How should I go about showing this local content in my webview?
Here is my saveAsset() code (strongly inspired by this answer) :
function saveAsset(fs, url, filename, callback, failCallback) {
// Set callback when not defined
if (!callback) {
callback = function(cached_url) {
console.log('download ok: ' + cached_url);
};
}
if (!failCallback) {
failCallback = function() {
console.log('download failed');
};
}
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function() {
fs.root.getFile(filename, {create: true, exclusive: false}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {
callback(fileEntry.toURL());
};
writer.onerror = failCallback;
console.log(xhr.response);
var blob = new Blob([xhr.response], {type: ''});
writer.write(blob);
}, failCallback);
}, failCallback);
});
xhr.addEventListener('error', failCallback);
xhr.send();
}
And this is the code that sets the src attribute of the webview to that URL.
window.webkitRequestFileSystem(window.PERSISTENT, 1024*1024, function (fs) {
saveAsset(fs, url, filename, function(localUrl) {
console.log(localUrl);
$(contentSelector).attr("src", localUrl);
});
});
I never managed make the webview work with local content, but switching to an iframe does work perfectly. I have both cached and uncached content so it makes some confusing code, but I fixed my issue by using both a webview and an iframe and hiding the one which is not in use.
PS. For anyone trying to do this, the webview won't load its content correctly if it is hidden with display:none . I had to move it outside of the screen instead.
I have a jQuery mobile panel which slides in from the side, it works great.
But lets say you have a login page, that redirects to a main page with a panel. Now if the user opens the panel, and then clicks the back button, he expects the panel to close. But instead the browser navigates back to the login page.
I´ve tried adding something to the url:
window.location.hash = "panelOpen";
But that just messes up the jQuery mobile history state pattern. I´ve also tried to listen to the navigate event, and prevent it if a panel is open:
$(window).on('navigate', function (e, hans) {
var panels = $('[data-role="panel"].ui-panel-open');
if (panels&&panels.length>0) {
e.preventDefault();
e.stopPropagation();
$('#' + panels[0].id).panel('close');
return false;
}
});
This kind of works, except that the url is changed, and I cannot grab the event that changes the url. Furthermore, it also messes up the jQuery mobile history pattern.
So how does people achieve this expected 'app-like' behaviour with a jQuery mobile panel; open panel > history back > close panel. And thats it.
Thanks alot!
Updated
Instead of retrieving current URL from jQuery Mobile's history, It is safer to retrieve it from hashchange event event.originalEvent.newURL and then pass it to popstate event to be replaceState() with that URL.
Instead of listening to navigate, listen to popstate which fires before. The trick here is manipulate both browser's history and jQuery Mobile's history by replaceState() and reload same page without transition.
var newUrl;
$(window).on("hashchange", function (e) {
/* retrieve URL */
newUrl = e.originalEvent.newURL;
}).on("popstate", function (e) {
var direction = e.historyState.direction == "back" ? true : false,
activePanel = $(".ui-panel-open").length > 0 ? true : false,
url = newUrl,
title = document.title;
if (direction && activePanel) {
$(".ui-panel-open").panel("close");
$(".ui-header .ui-btn-active").removeClass("ui-btn-active");
/* reload same page to maintain jQM's history */
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true
});
/* replace state to maintain browsers history */
window.history.replaceState({}, title, url);
/* prevent navigating into history */
return false;
}
});
This part is meant to maintain same transition used previously as transition is set to none when reloading same page.
$(document).on("pagebeforechange", function (e, data) {
if (data.options && data.options.allowSamePageTransition) {
data.options.transition = "none";
} else {
data.options.transition = $.mobile.defaultPageTransition;
}
});
Demo - Code
I am a little bit late on the party, but i had recently the same requirements and i would like to share how i did it. So, i extended the requirement in the original question to Panels, Popups and Pages:
...an expected 'app-like' behaviour, history back > close
whaterver is open. And thats it.
In .on("panelopen"), .on("popupafteropen") and .on("pagecontainershow") i simply add another entry to the window history, by using the HTML5 API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) (I believe there is no need to use the JQM navigate browser quirks for that):
window.history.pushState({}, window.document.title, window.location.href);
After that, i'm using more or less Omar's function to intercept the popstate event:
$(window).on("popstate", function (e) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pageOpen = (pageId != "page-home");
var panelOpen = $(".ui-panel-open").length > 0;
var popupOpen = $(".ui-popup-active").length > 0;
if(pageOpen) {
$.mobile.pageContainer.pagecontainer("change", "#page-home", {reverse: true});
return false;
}
if(panelOpen) {
$(".ui-panel-open").panel("close");
return false;
}
if(popupOpen) {
$(".ui-popup-active .ui-popup").popup("close")
return false;
}
});
As you see, the is just only one level to the home-page, but this can be easily extended by using JQM history implementation to get the previous page:
var activeId = $.mobile.navigate.history.activeIndex;
var jqmHistory = $.mobile.navigate.history.stack; // array of pages
and use pagecontainer to change to the active entry - 1.
As last note, this works well also by completely disabling the built-in JQM Ajax navigation system:
/* Completely disable navigation for mobile app */
$.mobile.ajaxEnabled = false;
$.mobile.loadingMessage = false;
$.mobile.pushStateEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.popup.prototype.options.history = false;
(Tested in Browser, on real Android and iOS devices)
I'm facing a problem using this 2 PhoneGap plugins: "BarcodeScanner" & "ChildBrowser" (inside an iOS app, with XCode 4 & PhoneGap 2.0).
I've a button "Scan" on my app UI. When the user clic on this button, the barcode scanner is launched.
So, in the Success function of the barcode scanner callback, I need to open the recovered URL from the scan in a new Childbrowser window (inner the app).
But the new Childbrowser window is never been opened, while the console displays "Opening Url : http://fr.wikipedia.org/" (for example).
Here is my JS part of code:
$("#btnStartScan").click(function() {
var scanBarcode = window.plugins.barcodeScanner.scan(
function(result) {
if (!result.cancelled){
openUrl(result.text);
}
},
function(error) {
navigator.notification.alert("scanning failed: " + error);
});
});
function openUrl(url)
{
try {
var root = this;
var cb = window.plugins.childBrowser;
if(cb != null) {
cb.showWebPage(url);
}
else{
alert("childbrowser is null");
}
}
catch (err) {
alert(err);
}
}
And all works fine if I call my openURL() function inside a Confirm alert callback for example, like this:
if (!result.cancelled){
navigator.notification.confirm("Confirm?",
function (b) {
if (b === 1) {
openUrl(result.text);
}
},
'Test',
'Yes, No');
}
But I need to launch the ChildBrowser window directly after a scan, without any confirm alert etc.
Does anybody know how to solve this please?
I also have this same problem.
Solve it by set timeout.
var scanBarcode = window.plugins.barcodeScanner.scan(
function(result) {
if (!result.cancelled){
setTimeout(function(){ openUrl(result.text); },500);
}
},
function(error) {
navigator.notification.alert("scanning failed: " + error);
});
I'm running into the exact same problem.
My application also has another mechanism to show a webpage besides the barcode reader and when I do that action I can see that the barcode-related page HAD loaded, but it never was shown.
In ChildBrowserViewController.m, I'm looking at the last line of loadURL() which is webView.hidden = NO; and I'm thinking that the child browser is set visible after we barcode but something about the barcode reader window caused the child browser to get set to the wrong z-order, but I'm not familiar enough with the sdk to know how to test that or try to bring it to the front.
Hope this helps target a potential area.
I write a Mozilla Jetpack based add-on that has to run whenever a document is loaded. For "toplevel documents" this mostly works using this code (OserverService = require('observer-service')):
this.endDocumentLoadCallback = function (subject, data) {
console.log('loaded: '+subject.location);
try {
server.onEndDocumentLoad(subject);
}
catch (e) {
console.error(formatTraceback(e));
}
};
ObserverService.add("EndDocumentLoad", this.endDocumentLoadCallback);
But the callback doesn't get called when the user opens a new tab using middle click or (more importantly!) for frames. And even this topic I only got through reading the source of another extension and not through the documentation.
So how do I register a callback that really gets called every time a document is loaded?
Edit: This seems to do what I want:
function callback (event) {
// this is the content document of the loaded page.
var doc = event.originalTarget;
if (doc instanceof Ci.nsIDOMNSHTMLDocument) {
// is this an inner frame?
if (doc.defaultView.frameElement) {
// Frame within a tab was loaded.
console.log('!!! loaded frame:',doc.location.href);
}
else {
console.log('!!! loaded top level document:',doc.location.href);
}
}
}
var wm = Cc["#mozilla.org/appshell/window-mediator;1"].getService(Ci.nsIWindowMediator);
var mainWindow = wm.getMostRecentWindow("navigator:browser");
mainWindow.gBrowser.addEventListener("load", callback, true);
Got it partially from here: https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads
#kizzx2 you are better served with #jetpack
To the original question: why don't you use tab-browser module. Something like this:
var browser = require("tab-browser");
exports.main = function main(options, callbacks) {
initialize(function (config) {
browser.whenContentLoaded(
function(window) {
// something to do with the window
// e.g., if (window.locations.href === "something")
}
);
});
Much cleaner than what you do IMHO and (until we have official pageMods module) the supported way how to do this.
As of Addon SDK 1.0, the proper way to do this is to use the page-mod module.
(Under the hood it's implemented using the document-element-inserted observer service notification, you can use it in a regular extension or if page-mod doesn't suit you.)