I want to launch my app from the browser this was made possible by this code:
window.location = "myApp://myparams";
With this i was able to open my app from browser. but with this method i leave the browser.
I would like to know if it is possible to show you app inside the safari browser.
for example referencing my app link inside an iframe. I tried implementing the code below but didnt get the desired output.:
var frame = document.createElement('iframe');
frame.src = 'myApp://';
frame.style.display = 'none';
document.body.appendChild(frame);
// avoid unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
Is there anything i am doing wrong or is it not possible using custom URL Schemes.
Related
I am looking for a way in JAVASCRIPT (possibly using iframes), to keep the url of an original site when a new page appears. Example: original site url shows www.initialPage.com. When the user clicks ALT-Z, the new website should show the content of www.secondaryPage.com. The code I thought would work looks like below. However, when ALT-Z is selected, www.initialPage.com stays in the url (which is what I want) but only a blank page shows.
document.addEventListener('keydown', function(e) {
if (e.altKey) {
switch (e.code) {
case 'KeyZ':
function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://www.secondaryPage.com");
ifrm.style.height = "100vh"
ifrm.style.width = "100vw"
document.body.replaceWith(ifrm);
}
prepareFrame();
break;
}
}
});
Is there something I forgot in the function to allow www.secondaryPage.com to display? I know there are security risks but this is for a very small trusted private network
I've done a lot more experimentation on this and it seems the reason the site with the iframe (www.secondaryPage.com) does not display has something to do with the initial page (www.initialPage.com) is a secure site. When I use an un-secure site as the initial page, the secondaryPage is displayed just fine. If anyone can provide some insight as to what I can do to have the above code work while on a secure site, I would appreciate it.
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();
}
});
})()
My question is about iOS9 only!
I have an HTML landing page, and I try to redirect the user to my app via URL scheme if the app is installed, or redirect to the Appstore otherwise.
My code is:
document.addEventListener("DOMContentLoaded", function(event) {
var body = document.getElementsByTagName('body')[0];
body.onclick = function () {
openApp();
};
});
var timeout;
function preventPopup() {
clearTimeout(timeout);
timeout = null;
window.removeEventListener('pagehide', preventPopup);
}
function openApp(appInstanceId, platform) {
window.addEventListener('pagehide', preventPopup);
document.addEventListener('pagehide', preventPopup);
// create iframe
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.setAttribute("style", "display:none;");
iframe.src = 'myscheme://launch?var=val';
var timeoutTime = 1000;
timeout = setTimeout(function () {
document.location = 'https://itunes.apple.com/app/my-app';
}, timeoutTime);
}
The problem is that the iframe trick doesn't work in Safari iOS9.
Any idea why?
My iframe trick based on this answer.
The iframe trick no longer works -- my guess is that Apple knows it will encourage more developers to implement Universal Links, more quickly.
You can still set window.location='your-uri-scheme://'; and fallback to the App Store after 500ms. There is a "dance" between popups if you take this approach, as we do at Branch (we do as a fallback if Universal Links don't work).
window.location = 'your-uri-scheme://'; // will result in error message if app not installed
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
}, 500);
I wish I had a better answer for you. iOS 9 is definitely more limited.
For a helpful overview of what's needed for Universal Links should you go that route, check out my answer here or read this tutorial
As already mentioned setting window.location on iOS 9 still works. However, this brings up an Open in App dialog. I've put an example on https://bartt.me/openapp that:
Launches Twitter when the Open in Twitter app is clicked.
Falls back to the Twitter app in the App Store.
Redirects to Twitter or the App Store without the user selecting Open in the Open in App dialog.
Works in all browsers on iOS and Android.
Look at the source of https://lab.bartt.me/openapp for more information.
Maybe try giving you app support to Universal Links
Idea:
Avoid custom (JavaScript, iframe) solutions in Safari, replace you code with a supported Universal Link.
Example
<html>
<head>
...
</head>
<body>
<div class"app-banner-style">
In app open
</div>
...content
</body>
</html>
if you app support Universal Links (e.g. yourdomain.com), you muss configure your domain (and path) and iOS9 should be react to it link opening you App. That is only theory, but I guess should be work :)
https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html#//apple_ref/doc/uid/TP40016308-CH12
iframe hack doesn't work in ios9 anymore. Possible solution is use two buttons.
Example:
$('#goToStoreBtn').text( "go to store" ).click(function(event){
event.preventDefault();
event.stopPropagation();
window.location = storeUrl; // https://itunes.apple.com/...
});
$('#goToAppBtn').text( "go to app" ).click(function(event){
event.preventDefault();
event.stopPropagation();
window.location = appUrl; // myApp://...
});
This is relatively old thread, but I have created a library that supports deeplinking on most of the modern mobile browsers. But this requires separate deeplinking page which needs to be hosted in different domain to support universal linking in ios9 facebook browser.
https://github.com/prabeengiri/DeepLinkingToNativeApp
I'm unsing a HTML widget in Layar which has to control all the interaction. So no Layar buttons. I trying to use a simple JavaScript / JQuery function to open a target app in the App Store:
$('.btn-download').click(function(){
window.location.href = "itms://itunes.com/apps/someApp";
});
I do something simular opening a mail window with mailto: which works fine. Somehow this will do nothing.
B.t.w. It only has to work on iOS.
Try using this:
setTimeout(function() {
window.location = "http://itunes.com/apps/someApp";
}, 25);
window.location = "custom-uri://";
Copied this from: Is it possible to register a http+domain-based URL Scheme for iPhone apps, like YouTube and Maps?
I am developing a custom plugin for Firefox. For one of the functions in this plugin I have a button which when clicked has to toggle hide/show for another div element. This is achieved by the means of a Javascript function. The function itself is in a file that is packaged in the plugin as well.
Since the div elements are on the browser page I am trying to get the Javascript for this function loaded into the HEAD of the page by using its chrome URL. However, it is not giving the desired result.
Below are snippets of the relevant code:
The actual Javascript that performs the toggle action. The chrome URL for this is: chrome://firefox_extension/content/togglerowz.js If I put this URL in the browser it is able to display the code below.
function toggle(doc) {
var resultBlock = doc.getElementById("RowzFFExtensionDynamicContainer");
var toggleButton = doc.getElementById("RowzFFToggle");
if (resultBlock.style.display == "block") {
resultBlock.style.display = "none";
toggleButton.value = "Maximize";
} else {
resultBlock.style.display = "block";
toggleButton.value = "Minimize";
}
}
Another Javascript that loads this into the browser HEAD. This is triggered by a window load event.
var doc = aEvent.originalTarget;
var togglerowzscript = doc.createElement("script");
togglerowzscript.type = "application/javascript";
togglerowzscript.src = "chrome://firefox_extension/content/togglerowz.js";
var headvar = doc.getElementsByTagName("head")[0];
headvar.appendChild(togglerowzscript);
When the page loads, the following contents are in the HEAD element of the page (as viewed in Firebug):
<script type="application/javascript" src="chrome://firefox_extension/content/togglerowz.js">
Filtered chrome url chrome://firefox_extension/content/togglerowz.js
</script>
When I click the button the error console says toggle is not defined.
Did you whitelist the relevant chrome package as allowing untrusted content to load parts of it? The default setting is to not allow that for various security and privacy reasons. See https://developer.mozilla.org/en/chrome_registration#contentaccessible