Working with browser plugin in ionic 3 and i need to open the browser web-view only inside ionic app and not to open external browsers, so i did like this
constructor( public iab: InAppBrowser) {}
url = "https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/";
options : InAppBrowserOptions = {'location':'no' };
this.iab.create(this.url,'_self' , this.options )
Even if i set target to "_blank" the link gets opened in an external browser
But in some devices the url gets opened in an browser could someone help me
Html
<ion-content >
<iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts" *ngIf="!loading" style="width:100%; height:100%; border:none; " [src]="yourURl"></iframe>
</ion-content>
Add this line in your constructor
this.yourURl=this.sanitizer.bypassSecurityTrustResourceUrl(URL_link_here);
Related
I am working in my Ionic 4 app and I have added a back button in my toolbar and I want to show the back button only on some particular pages.
This is app.component.html:
<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>
I want to show the back button only on some particular pages.
I have added the CSS for displaying the back button on some particular pages but it is not working.
I have also added the [hidden]="menuIsHidden" and make it false by default and true on some particular pages but this is also not working.
Any help is much appreciated.
Create a page by executing the following command:
ionic generate page SharedToolbar
Then inside that page use the #Input() directive, example:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<div *ngIf="showBackButton== 'true'">
<ion-back-button></ion-back-button>
</div>
</ion-buttons>
typescript:
#Component({
selector : 'shared-toolbar',
templateUrl : './shared-toolbar.page.html',
styleUrls : ['./shared-toolbar.page.scss'],
})
export class SharedToolbar implements OnInit
{
#Input() showBackButton: string = 'false';
constructor() { }
ngOnInit(){}
}
Then in any page you create, you can add the following in the html:
<shared-toolbar showBackButton="true"></shared-toolbar>
and send the following attribute as above to show the back button.
Note:
In the module of each page you might have to add the following:
schemas : [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
to be able to use a template URL of a specific page.
more info here:
https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding
You can create a css class such as:
.back-hide {
display: none;
}
And then use a ngClass on the back button that applies the style if needed.
<ion-back-button class="btnmy11" defaultHref="/" [ngClass]="{'back-hide': menuIsHidden==true}"></ion-back-button>
where you want to show back button you can use ion-nav instead use of ion-toolbar.
By default ion-nav animates transition between pages based in the mode (ios or material design).
I took the sample HTML5 and tried in iOS Safari.
The sample photo appears but keeps loading continuously and no Aviary editing actions can be performed.
Does anybody have a solution?
Here's the sample code directly from the Aviary site at http://www.aviary.com/web-documentation
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<!-- Instantiate Feather -->
<script type="text/javascript">
var featherEditor = new Aviary.Feather({
apiKey: '12345678',
apiVersion: 2,
tools: 'all',
appendTo: 'injection_site',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id="injection_site"></div>
<img id="image1" src="http://images.aviary.com/imagesv5/feather_default.jpg"/>
<!-- Add an edit button, passing the HTML id of the image and the public URL ot the image -->
<p><input type="image" src="http://advanced.aviary.com/images/feather/edit-photo.png" value="Edit photo" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
I contacted Aviary at api#aviary.com and they mentioned that there was a bug that they fixed today. It works now.
You have to put this code on live server, local does't seem to work here. Aviary web documentation says that "Set a location on your server for Aviary to send a server-to-server HTTP POST".
Just in case...
You must add the complete 'src' in the photo.
Instead us using "src='/upload/miPhoto.png'" you must use "src='http://localhost:8080/project/upload/miPhoto.png'"
Hope this helps!
If opening a web (urlX) directly on IE8 with Chrome Frame installed all is ok. (i can see context menu as if I were in chrome).
If opening another web (y) which have piece of js code like
...
function inici(){
ifitxamd.location.replace(urlX);
}
...
<body class='dtvc_info_fons' onLoad='inici()' >
<iframe name='ifitxamd' width="100%" height="100%" frameborder="no" scrolling="auto" marginheight="0" marginwidth="0"></iframe>
</body>
This new page is loaded but no GWT application starts. It also hasn't context menu like chrome, so it's like chrome frame it's not loading.
Any Idea? Thanks.
Chrome Frame only runs for top-level content. There is no way to load iframe content with Chrome Frame unless the parent of the iframe is already rendered by Chrome Frame
This is my first question asked, so if I leave out details please be a little lenient. Thanks!
I am using the Facebook Like Button plugin on my site (tried both HTML5 version and xfbml version). I have included all necessary tags and scripts for xfbml and HTML5 support. I have followed the "spec" and done a thorough amount of searching here and elsewhere to the problem:
The like button functions correctly, except that the flyout/popup that is supposed to show after clicking the button doesn't load. I mean load, not show (and yes I already checked for overflow:hidden issues per the spec). The new <span> (which includes the <iframe>) are added to the DOM immediately after the like button <span>, and they load all of the code that is supposed to be there:
<span class=" fb_edge_comment_widget fb_iframe_widget " style="top: 19px; left: 0px; z-index: 10000;">
<span>
<iframe id="fa02aa64d8da" class="fb_ltr" scrolling="no" name="fee6eb9f6f2768" style="border: medium none; overflow: hidden; height: 225px; width: 401px;" src="http://www.facebook.com/plugins/comment_widget_shell.php?api_key=233493930007947&locale=en_US&master_frame_name=fa12240bc73214&sdk=joey">
<html>
<head>
<body onload="onPageLoad()">
<script>
var onPageLoad = function() {
document.domain = 'facebook.com';
var loc = window.location.toString();
var index = loc.indexOf('?');
var qs = loc.substring(index + 1);
var params = qs.split('&');
var master_frame_name = '';
for (var i in params) {
var components = params[i].split('=');
if (components[0] == 'master_frame_name') {
master_frame_name = components[1];
break;
}
}
try {
var master_frame = parent.frames[master_frame_name];
master_frame.ExternalNodeConnectWidget.onCommentWidgetLoaded(document);
} catch (e) {}
};
</script>
</body>
</html>
</iframe>
</span>
</span>
Now after that <span> is loaded it is supposed to fire the script function onPageLoad which should load all of the data into the <iframe>. Instead I get a bunch of errors:
There is the infamous Unsafe Javascript attempt to access frame with URL
When you manually run the onPageLoad() function (in hopes of it loading the content into the iframe) in the console/Firebug, you get
(in Chrome 15)
Error: SECURITY_ERR: DOM Exception 18
code: 18
message: "SECURITY_ERR: DOM Exception 18"
name: "SECURITY_ERR"
__proto__: DOMException
(in Firefox 7)
Error: Illegal document.domain value
document.domain = 'facebook.com';
I presume this has to do with cross-domain requests, but it seems like for other people, they just get the error but the popup still loads properly. Any ideas how to get this to work?
This is a known Facebook bug: http://developers.facebook.com/bugs/293075054049400
Basically, one gets this behavior if secure browsing is enabled on the Facebook user's account.
If you have secure browsing disabled (as it is default) here is another possible solution:
You cannot use localhost in the og:url since Facebook cannot surf that page to get the data. So when developing, enter the live site URL in og:url, og:image, the like/share button url etc. Even that might not help, the click needs to be made on the live site, when I deployed it worked fine.
Anyone know a work around for this to make it easier when developing locally?
I have two links on an optimized mobile Safari web site. One is a link to the App Store to download my application. The other is a Launch App button which uses the registered app:// protocol to open the application. The problem is that mobile Safari chokes when the user clicks the Launch App button if the application is not installed. Is it possible to detect if the registered protocol is available, and if it isn't, change the Launch App button with an appropriate URL, such as the download app URL, so that the user doesn't get a nasty popup?
This is broadly similar to this question; the most relevant suggestions there are to have a single button that attempts to launch the app, simultaneously creating a timer that'll fire if the app isn't installed on the grounds that if it were then Safari would have exited before the timer fires.
If you add an iframe on your web page with the src set to custom scheme for your App, iOS will automatically redirect to that location in the App. If the app is not installed, nothing will happen. This allows you to deep link into the App if it is installed, or redirect to the App Store if it is not installed.
For example, if you have the twitter app installed, and navigate to a webpage containing the following markup, you would be immediately directed to the app. If you did not have the Twitter app installed, you would see the text "The Twitter App is not installed."
<!DOCTYPE html>
<html>
<head>
<title>iOS Automatic Deep Linking</title>
</head>
<body>
<iframe src="twitter://" width="0" height="0"></iframe>
<p>The Twitter App is not installed</p>
</body>
</html>
This means that you could have a single button that directs to a web page with markup similar to this:
<!DOCTYPE html>
<html>
<head>
<title>iOS Automatic Deep Linking</title>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
<script>
(function ($, MobileEsp) {
// On document ready, redirect to the App on the App store.
$(function () {
if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
// Add an iframe to twitter://, and then an iframe for the app store
// link. If the first fails to redirect to the Twitter app, the
// second will redirect to the app on the App Store. We use jQuery
// to add this after the document is fully loaded, so if the user
// comes back to the browser, they see the content they expect.
$('body').append('<iframe class="twitter-detect" src="twitter://" />')
.append('<iframe class="twitter-detect" src="itms-apps://itunes.com/apps/twitter" />');
}
});
})(jQuery, MobileEsp);
</script>
<style type="text/css">
.twitter-detect {
display: none;
}
</style>
</head>
<body>
<p>Website content.</p>
</body>
</html>
Below is a code snippet that works, but is not perfect. You still see the safari popup, but everything else works as expected:
<script type="text/javascript">
var timer;
var heartbeat;
var lastInterval;
function clearTimers() {
clearTimeout(timer);
clearTimeout(heartbeat);
}
window.addEventListener("pageshow", function(evt){
clearTimers();
}, false);
window.addEventListener("pagehide", function(evt){
clearTimers();
}, false);
function getTime() {
return (new Date()).getTime();
}
// For all other browsers except Safari (which do not support pageshow and pagehide properly)
function intervalHeartbeat() {
var now = getTime();
var diff = now - lastInterval - 200;
lastInterval = now;
if(diff > 1000) { // don't trigger on small stutters less than 1000ms
clearTimers();
}
}
function launch_app_or_alt_url(el) {
lastInterval = getTime();
heartbeat = setInterval(intervalHeartbeat, 200);
document.location = 'myapp://customurl';
timer = setTimeout(function () {
document.location = 'http://alternate.url.com';
}, 2000);
}
$(".source_url").click(function(event) {
launch_app_or_alt_url($(this));
event.preventDefault();
});
</script>
I have blogged about the details here: http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world