In my ionic (v1.2.4) app there is an embedded youtube player with a link "watch on youtube". If a user clicks this link, youtube website is opened in web view of cordova. It destroys current state of my app. I want to open that link in system's web browser (cordova in app browser plugin).
Same with any link in any iframe (vimeo, soundcloud...)
This link can't be modified with JS from outside the iframe, because cross domain security issues. So i can't update target attribute from _blank to _system.
Show a dialog onbeforeunload is not really an option because it looks ugly :)
Is there a possibility to avoid a page being loaded into the same webview or in the system's web browser?
Breaking links by using iframe's sandbox attribute is not an option because it breaks youtube player completely.
Thanks and cheers
ps: i asked this question here but couldn't get any helpful information
Thanks thepio for the hint with allow-intent and allow-navigation. First time i really digged into cordova-whitelist-plugin. Finally i fixed my issue on android by setting the correct allow attributes in config.xml
<!-- Allow links to web pages to open in a browser -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
No allow-navigation for android. Perfect white label solution. Couldn't find out how to do this on iOS, because iOS needs allow-navigation attributes to load iframe content at all.
To fix my issues on iOS in a dirty way, i added this to my config.xml:
<platform name="ios">
<allow-navigation href="https://w.soundcloud.com/player/*"/>
<allow-navigation href="https://www.youtube.com/embed/*"/>
<allow-navigation href="https://player.vimeo.com/video/*"/>
</platform>
Now only the iframe content itself is loaded. Lucky me, every link (watch on YouTube, share, like on vimeo...) inside the iframe is pointing to another domain/subdomain so it is blocked on iOS.
If there are any suggestions, how to create a white label solution for iOS, i am all ears.
Thanks
Ok, this is kind of a hardcore solutions for this and should probably be re-written/coded. This solution uses a cordova hook and opens ALL links with http or https protocol to a native web browser when they are clicked from a a-tag. For example <a href="https://www.youtube.com/embed">. This does not only affect iframes but all links.
Be careful since this might affect some unwanted links in your app.
I'm running
Cordova 6.1.1
Cordova-ios 4.1.1
Cordova-android 5.1.1
First of all you need to create a hook in the hooks/after_platform_add folder. This will run the hook only when you use ionic platform add <platform> or cordova platform add <platform>. If you do not have a folder called after_platform_add just create one. Then create a file "01_ios_external_links_hook.js".
Also please read Cordova hooks documentation:
https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/
There are several ways of defining hooks and creating folders for them seems to be deprecated so you should use the config.xml to attach hooks.
https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html#via-hooks-directory-deprecated
You can call your file anything and if you are doing it with folders just remember to add access rights to the file. Typically in terminal:
chmod +x project/hooks/after_platform_add/01_ios_external_links_hook.js.
Please note that this fix is intended only for iOS devices since on android you can handle this with setting <allow-intent href="http://*/*" /> and setting <access origin="*" />. But on the latest Cordova-ios and whitelist-plugin you need to set <allow-navigation href="*.youtube.com" /> or similar to allow the content of iframe to load on iOS. This will lead to a situation which you described which is that external urls from the iframe will open in the webview.
But back to the solution. This is the code which I have inside the 01_ios_external_links.js file:
#!/usr/bin/env node
var fs = require('fs');
var replace = require('replace');
if (fs.existsSync('platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.m')) {
console.log('platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.m - FOUND: fixing');
replace({
regex: /.*BOOL shouldLoad = YES;*./g,
replacement: 'BOOL shouldLoad = YES; NSURL * requesturl = [request URL]; NSString * url = [[request URL]absoluteString]; NSString * documenturl = [[request mainDocumentURL]absoluteString]; if ((navigationType == UIWebViewNavigationTypeLinkClicked && ([[requesturl scheme] isEqualToString:#"http"] || [[requesturl scheme] isEqualToString:#"https"])) || (([url isEqualToString:documenturl]) && ([[requesturl scheme] isEqualToString:#"http"] || [[requesturl scheme] isEqualToString:#"https"]))) { [[UIApplication sharedApplication] openURL:requesturl]; return NO;}',
paths: ['platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.m'],
recursive: true,
silent: true,
});
} else {
console.log('platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.m - NOT FOUND');
}
Please note that this is a risky operation to be done, but I had no other means of dealing with this problem at the time. The above code searches if there is a file called CDVUIWebViewDelegate.m in the path given and then tries to find a piece of code in there and replace it with another piece of code. But in a nutshell the code above will modify the platform specific code for iOS in the CDVUIWebViewDelegate and add a if statement of the following kind to this file:
NSURL * requesturl = [request URL];
NSString * url = [[request URL]absoluteString]; // URL that was requested
NSString * documenturl = [[request mainDocumentURL]absoluteString]; // Main document URL
if ((navigationType == UIWebViewNavigationTypeLinkClicked && ([[requesturl scheme] isEqualToString:#"http"] || [[requesturl scheme] isEqualToString:#"https"])) || (([url isEqualToString:documenturl]) && ([[requesturl scheme] isEqualToString:#"http"] || [[requesturl scheme] isEqualToString:#"https"]))) {
[[UIApplication sharedApplication] openURL:requesturl]; // forward to application router
return NO;
}
Consider that I'm not a objective-c coder and this is all new to myself also and I made this solution because I did not find any other solutions to my problem which worked. The above if statement could and should be modified to your needs. I have only used this code on development environment and will need to investigate further and improve this method before implementing it to a production environment.
Remember that you need to remove and add the platform for this to take effect. This only occurs when adding a platform as stated above.
But that is it. Now your iOS application will open all urls in a native browser. Hopefully this helps you in the right direction for finding a (better?) solution to this problem.
I also faced the same problem and was able to solve with the following code.
$('iframe#youtube').get(0).contentWindow.open = function (url) {
cordova.InAppBrowser.open(url, "_system");
};
This code works only on iOS.
Related
I'm developing a ChromeOS kiosk application (website + chrome extension) which suppose to run in Kiosk Mode on managed Chromebook devices. Application displays external web content which I don't own, I'm using sandboxed iframes to display that web content. These external websites should not escape their iframes, that's why I sandbox them. The app is basically a simple web browser but instead of tabs I use iframes, and the top frame (window.top) is the wrapper around these iframes.
With all ChromeOS technical limitations I was able to bypass most of the iframe checks (x-frame-options, csp, blocked 302...) using the extension. However there is one I'm stuck with - framekillers. I can't properly display websites which do self !== top type of checks.
Is there a way to bypass it too somehow? I'm fine with refactoring my app completely or use something else instead of iframe. The app has to fulfil only one condition though - kiosk mode on a managed chromebook.
It's unfortunate that Chrome Apps with <webview> tag were deprecated and Android apps can't run in Kiosk mode anymore. This would solve all my issues easily by just using something else than iframes.
I've tried injecting the following buster <script> via a content script but it doesn't seem to work, websites seems to be doing something more advanced.
buster.ts
function buster() {
if (top !== self) {
(window.self as any) = window.top;
(window.parent as any) = window.top;
}
}
buster();
content-script.ts
const b = document.createElement('script');
b.src = chrome.runtime.getURL('buster.js');
const el = document.head || document.documentElement;
el.insertBefore(b, el.firstChild);
console.debug('buster is injected');
solution based on #wOxxOm comment (for MV3 extension):
background.ts
chrome.scripting.registerContentScripts([
{
allFrames: true,
id: 'some-id',
js: ['buster.js'],
matches: ['<all_urls>'],
runAt: 'document_start',
world: 'MAIN',
},
]);
buster.ts
function buster() {
if (top !== self) {
(window.self as any) = window.top;
}
}
buster();
I have a helper.html page that I need to include in my Meteor app to assist with using an api. Looks like this.
<head>
<script type="text/javascript" src="https://www.example.com/api-helper.js"> </script>
</head>
<body>
</body>
Right now I just have it in the root directory of my app. As it is now, here are the problems: the other api script which I have included in main.html, can't find the helper.html. Second, I get this error in the console: Error: Oh no! No route found for path: "/helper.html?. So my question is how do I properly include this helper html page into my Meteor project? Help greatly appreciated.
Thanks
Just put your html file into a folder called public in the root folder.
Error: Oh no! No route found for path: "/helper.html"
This is an error from iron:router, it's complaining that it can't find any route for path "helper.html".
I suppose you get this error message when typing directly http://localhost:3000/helper.html in your browser address bar, which is WRONG because this is not how iron:router is supposed to work.
iron:router manages pure client-side routing using HTML5 push state API contrary to classic server-side routing involved when requesting "/helper.html" to Apache or nginx means the server is going to send you an actual HTML response page displayed by the browser.
In Meteor "single-page apps", the server does not send any HTML responses to the client, it only sends data. It means that the routing takes place entirely in the client, the URL in the address bar gets parsed and iron:router provides utilities to respond accordingly, which usually involves rendering a different template based on which path (route) you hit.
I hope you really understand the difference in nature between these two approaches because this is very important to be aware of when developing with Meteor.
As far as your problem is concerned, I'll take DISQUS integration as an example which seems to be a similar issue.
DISQUS integration on standard PHP solutions is straightforward, you just need to copy-paste this so-called universal embed code :
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
blog comments powered by <span class="logo-disqus">Disqus</span>
This is fine because once a page gets sent to the client in a traditional website, javascript code gets executed once and we are done : if the user click on another page on the website, the all process of generating the HTML response, sending it to the client and executing JS code will be started from scratch.
However we can't just copy-paste this code inside a Meteor template, because Meteor webapps are "single-page apps", no page reloading process should ever happen in these type of websites.
When we navigate to another page in a Meteor app, the javascript context stays the same and we don't want the DISQUS script to reexecute. What we need to do instead is loading the script only once in the rendered callback of our template.
So we come up with the following Meteor template logic to integrate DISQUS comments loading :
<template name="disqus">
<div id="disqus_thread"></div>
<a href="http://disqus.com" class="dsq-brlink">
blog comments powered by <span class="logo-disqus">Disqus</span>
</a>
</template>
Template.disqus.rendered=function(){
// assumes we get identifier and title as data context
var identifier=this.data.identifier;
var title=this.data.title;
// we need a way to tell if the script has already been loaded or if it's
// the first time, we can check for the existence of the DISQUS variable on
// the global window object to make the difference
if(window.DISQUS){
// DISQUS API has our back, see this resource
// https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
window.DISQUS.reset({
reload:true,
config:function(){
this.page.identifier=identifier;
this.page.title=title;
}
});
}
else{
// first initialization
window.disqus_shortname = "disqus-shortname";
window.disqus_identifier = identifier;
window.disqus_title = title;
window.disqus_developer = 1;
// load the script via JS instead of embedding it in the HTML
var script = $("<script>",{
type:"text/javascript",
async:true,
src:"//" + disqus_shortname + ".disqus.com/embed.js"
});
$("head").append(script);
}
};
This example demonstrates the way to go when you need to embed API code (google-analytics, DISQUS, etc...) in a Meteor website.
I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.
I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.
If I do something like this:
browser.insertCSS({code:"body{background-color:red;}");
The style is applied correctly. However if I do this:
browser.insertCSS({file:"mobile-style.css");
And add the same CSS to the file, it doesn't get loaded
I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.
I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).
Any help would be greatly appreciated.
Thanks
Will
you have to wait until your inAppBrowser page loading finishes.
You must add an event listener:
var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
EDITED
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL
file: 'http://mywebsite.com/path-if-needed/my.css'
Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.
I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.
If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.
var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");
//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);
function loadedCallbackFunction() {
console.log("InAppBrowser Window loaded");
$.ajax({
type: "GET",
url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
dataType: "text",
success: function (CSScode) {
inAppBrowserRef.insertCSS(
{ code: JScode},
function(){
console.log("CSS code Inserted Succesfully into inApp Browser Window");
});
},
error: function () {
console.error("Ajax Error");
}
});
}
You need the cordova-plugin-inappbrowser
I have a strange problem with my iPad App in Phone Gap. The problem is that I have to open PDF document in my app through links and when I click the link which opens the PDF, it shows me the PDF document with no back link.
Hence, when I open the PDF document in my app through a link, it takes me to a dead end and there is no way I can go back to the main page of my app.
My question is that how can I have a Top-Bar, when I open a PDF which could take me back to my home page? Any internal element for the iPad may be?
Thanks a lot.
Try using the In App Browser plugin.
If you're using a later Phonegap / Cordova version (2.8.0, 2.9.0 etc) it should come with it - nothing else to install.
http://docs.phonegap.com/en/2.9.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
It will allow you to open the PDF in the a new 'window' that overlays your app. It has a 'Done' button that users can use to close it and return to your app when they are finished.
You would open the PDF using the In-App Browser, using something like this:
window.open('http://whitelisted-url.com/pdftoopen.pdf', '_blank');
I.e. the _blank option triggers the In-App Browser plugin. If you were to use _system instead it might open it in iBooks (just guessing there - not 100% sure if it would use iBooks).
Try prefixing https://docs.google.com/viewer?url= in the URL
like, window.open('https://docs.google.com/viewer?url=http://www.example.com/example.pdf&embedded=true', '_blank', 'location=yes');
Try this to open any kind of documents from URL using following steps:
install this plugin : cordova plugin add https://github.com/ti8m/DocumentHandler
use this code :
handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } }, 'http://www.example.com/path/to/document.pdf');
It works for me both on Android and IOS. I used it for open images and PDF files.
Android : It opens files using system apps if available, otherwise it give an error, which you can handle.
IOS : It opens files in popup like view with Done button and Option button.
It doesn't show your docs URL.
Source is available here : https://github.com/ti8m/DocumentHandler
Thanks asgeo1,
I solved it by using window.open().
<img src="images/samplens.jpg" border="0" />
Hope it helps.
I've ended up using WebIntent
as described here. The tricky part was to modify WebIntent.java to properly identify file type:
String type = obj.has("type") ? obj.getString("type") : null;
// New code starts
Uri uri = obj.has("url") ? Uri.parse(obj.getString("url")) : null;
String extension = MimeTypeMap.getFileExtensionFromUrl(obj.getString("url"));
if(extension != null){
MimeTypeMap mimeTypeMap = MimeTypeMap.getSingleton();
type = mimeTypeMap.getMimeTypeFromExtension(extension);
}
// New code ends
JSONObject extras = obj.has("extras") ? obj.getJSONObject("extras") : null;
I'm posting this question to Stackflow b/c after doing much research into an answer to this very question online, I did not come across a straight forward answer and had to do my own sleuthwork to resolve this.
Basically, Sitecore uses a handler file .ASHX for all files uploaded to the Media Library. Since the 3rd party GA tracking tool I was using (entourage.js or gatags.js) does not recognize .ashx as a whitelisted download file, it was not adding the appropriate GA tracking syntax to the GA pixel tracker (__utm.gif).
So the solution turns out to be simple but sadly, not retroactive, meaning all files previously uploaded to the Media Library in the Sitecore content tree will continue to use the ashx extension unless you reupload the image. In your web.config file, search for the "Media.RequestExtension" setting. If you change the value associated with this setting from "ashx" to a blank string, this will force Sitecore to use the originalextension of the file and image in the Sitecore Media Library.
Aside from interfering with GA analytics, this method of turning every downloadable file extension into an ashx file is poor SEO practice. AND, Sitecore will not point you in the right direction of getting around this other than a round-about way (google Sitecore dynamic linking and configuration) because they want you to use their Sitecore OMS download tracking capability. And that's it! Two days of research led me to this conclusion.
So the solution turns out to be simple but sadly, not retroactive,
meaning all files previously uploaded to the Media Library in the
Sitecore content tree will continue to use the ashx extension unless
you reupload the image.
Not sure where you got this information, but it's incorrect. You can blank out the Media.RequestExtension setting and all existing files will use their original extension. In IIS7 Integrated Mode, you should be able to make this change without having to make other server configuration changes.
Edit: More Info
If you analyze Sitecore.Configuration.Settings.Media.RequestExtension (the API equivalent to this settings) in a decompiler, you can see that it's only used by the MediaProvider when constructing the Media URL. Sitecore should remember the original extension of the media and can serve it with its original URL, regardless of what this setting was when it was uploaded. That's my experience, anyway, and it seems to be validated by looking into Sitecore.Kernel.
You could use this script to track download events via Google Analytics.
if (typeof jQuery != 'undefined') {
jQuery(document).ready(function($) {
var filetypes = /\.(zip|pdf|doc*|xls*|ppt*|jpg|ashx)$/i;
var baseHref = '';
if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
jQuery('a').each(function() {
var href = jQuery(this).attr('href');
if (href) {
if (href.indexOf('?') != '-1') {
href = href.substring(0, href.indexOf('?'));
}
if (href.match(filetypes)) {
jQuery(this).click(function() {
var extension = String((/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined);
var filePath = String(href);
_gaq.push(['_trackEvent', 'Download', extension, filePath]);
if (jQuery(this).attr('target') != undefined && jQuery(this).attr('target').toLowerCase() != '_blank') {
setTimeout(function() {
location.href = baseHref + href;
}, 200);
return false;
}
});
}
}
});
});
}
Just add in the required file types here at this line -
var filetypes = /.(zip|pdf|doc*|xls*|ppt*|jpg|ashx)$/i;
Having done a quick google for gatags.js, I can see that you can add an extension to the whitelist on line 24:
var isDoc = path.match(/\.(?:doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|\&|\?)/);
Change it to:
var isDoc = path.match(/\.(?:ashx|doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|\&|\?)/);
Alternatively, you could attach the Google Analytics _trackEvent yourself with a dom selector and a click event.
Either way, I think OMS can track media library files regardless of extension - removing the default ashx extension doesn't stop the file being handled by Sitecore.