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?
Related
I am using a x-ms-webview to display an embedded media website, It work great by the problem is I can't handle full screen event when user want to go to full screen.
In iframe i can using webkitfullscreenchange to handle this, but with x-ms-webview seem not work.
Anyone can explaint me why and How to handle full screen event came from media in x-ms-webview?
Thanks
We can interact with the content of the web view by using the InvokeScriptAsync method to invoke or inject script into the web view content, and the ScriptNotify event to get information back from the web view content.
To invoke the onwebkitfullscreenchange event inside the web view content, use the InvokeScriptAsync method.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
For more info, refer Interacting with web view content.
For example:
<x-ms-webview id="webview" src="https://www.....com" width="1920" height="1080"></x-ms-webview>
<script src="js/main.js"></script>
The js code:
(function (evt) {
"use strict"
var ViewManagement = Windows.UI.ViewManagement;
var FullScreenSystemOverlayMode = ViewManagement.FullScreenSystemOverlayMode;
var ApplicationView = ViewManagement.ApplicationView;
var view = ApplicationView.getForCurrentView();
var webview = document.getElementById("webview");;
webview.addEventListener("MSWebViewFrameDOMContentLoaded", function () {
var op = webview.invokeScriptAsync("eval", "document.onwebkitfullscreenchange = function (evt) { window.external.notify('123'); }");
op.start();
});
webview.addEventListener("MSWebViewScriptNotify", function (evt) {
if (view.isFullScreen) {
view.exitFullScreenMode();
}
else {
view.tryEnterFullScreenMode();
}
});
})()
What I did,
I took this angularjs project and did nothing just updated it using nugget package manager to latest angular libraries,
https://github.com/OfficeDev/Learning-Path-Manager-Code-Sample
Issue
When I click on top right settings button, "Working On It" dialog appears and doesn't goes away.
What I investigated
Looking at url, when I click on "cog" url changes from,
https://omapny-ersda819baad8d.apps.com/sites/Dev1/lpm/app.html#/
to
https://omapny-ersda819baad8d.apps.com/sites/Dev1/lpm/app.html#
and dialog appears, but when I add "/" again, dialog disappears
what could be wrong ? I am totally new to AngualrJS
Edit
Most likely because it has this third party link,
<a id="chromeControl_topheader_apptitlelink" href="#" class="ms-core-suiteLink-a" target="_top"><span id="chromeControl_topheader_apptitle">Learning Path Manager</span></a>
How to get around this ?
I fixed this issue by doing followings,
for app title, I had to modify appStartPage to following,
function init() {
// create chrome control settings
spChromeControlData = {
appStartPage: "app.html#/",
Above change is in spAppChrome.js controller file then in same file i added this within init function,
//fix issues with chrome ctrl
$('body').on('click', '.ms-core-menu-root', function () {
$(this).attr("href", "javascript:;")
});
So this will look something like this,
// create the sharepoint chrome control
var nav = new SP.UI.Controls.Navigation("chrome_ctrl_container", spChromeControlData);
// show chrome control
nav.setVisible(true);
// hide top app chrome (image & app name)
nav.setBottomHeaderVisible(false);
//fix issues with chrome ctrl
$('body').on('click', '.ms-core-menu-root', function () {
$(this).attr("href", "javascript:;")
});
logger.log("spAppChrome loaded", null, controllerId);
common.activateController([], controllerId);
}
Let me know if there's any issue.
Thanks
I'm writing a Chrome extension that provides a content script to any page on GitHub (i.e. any URL matching https://github.com/*).
I'm simply trying to log something to the console each time a page on GitHub loads, like so:
window.onload = function() {
console.log("LOAD");
};
This listener function is executed the very first time a GitHub page is loaded, but if the user navigates to other pages on GitHub from there (by clicking on links or through other means), it doesn't fire. Why? :(
Steps to reproduce:
Open any repository's page on GitHub (example). You should see the message logged to the console.
Click on any link on that page. When the new page is loaded, no message is logged. :(
How do I solve this?
It seems that GitHub uses AJAX (along with history.pushState) to load some parts of the site, so onload will fire only when the page truly loads, but not when content is loaded via AJAX.
Since GitHub uses pushState to change the URL when AJAX content is done loading, you can detect when that happens, and execute your code.
There isn't actually a native event right now that fires when pushState is used, but there's this little hack:
(function(history){
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
return pushState.apply(history, arguments);
}
})(window.history);
So, run that, and then, instead of window.onload, you can do:
history.onpushstate = function () {
console.log("LOAD");
};
Not ALL of GitHub page's load this way (AJAX + pushState), so you'd have to use both, window.onload and history.onpushstate.
Also, you should use window.addEventListener('load', fn); instead of window.onload, since you don't know if GitHub's code could be overwriting window.onload.
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
Normally, when I use in my metro application, the url is opening in the default web browser. I don't want to do this with anchor, I want to do the same behavior via Javascript and as async. But I don't know how to open the url with default browser.
Here is my code:
var $aTag = $("<a/>").click(function (event) {
showYesNoDialog(
"Do you approve?",
"The link will be opened in another window. Do you approve?",
"Yes", // Text of yes button
"No", // Text of no button
function () { // Behavior of yes button
// I tried this but nothing happened.
window.location.href = _URL_; // Should open in chrome or default web browser
},
function () { // Behavior of no button
// do nothing
}
);
});
What I also tried is that:
$("<a href='" + _URL_ + "'></a>").click();
But this didn't work, too.
Finally, I found my answer while searching on google.
Open a URL in a new tab (and not a new window) using JavaScript
I used this code to open the url out the metro app and it worked in my situation:
window.open(_URL_, '_blank');
window.focus();
You cannot launch an actual application from within Metro, but what you can do is launch a file with associated program, and that should give you the functionality you need.
Check Sample
The sample covers files and URI's - http://msdn.microsoft.com/library/windows/apps/Hh701476