I have an app made with Phonegap.
For a certain feature, sometimes I need to load a webpage/ site into the app - for this, i use an iframe.
The iframe always displays the desktop version of the webpage though, even when I know the page has a responsive design.
Is there a way to force the iframe to load the site as a mobile?
You should use the InAppBrowser plugin to open up an external web page. This is going to be much safer since the foreign page won't have access to your Cordova instance. (If I have a third party page, and you load my page into your app through an iFrame, I can easily "hack" your application and steal user data, run arbitrary Cordova commands, etc.)
Additionally, when using the InAppBrowser, you can tell the browser to open any links in the current Cordova WebView, so that external site will just appear in your app. I don't know what your external site looks like, but this might be what you want to do. You can accomplish this by setting the target as _self, like this:
var ref = window.open('http://apache.org', '_blank', 'location=yes');
Related
I am building a PWA with React and I want to open an external website in my app (like e. g. in the Facebook app when you click on a link the external site just slides in from the bottom in an extra window).
As my app is a PWA I could potentially use an iframe for the same effect but of course this approach is limited due to x-frame-options.
Are there any other options to achieve the desired behavior?
I don't think there are other ways, iframe is the exact tool to accomplish what you want. x-frame-options exists for security reasons, if some websites don't allow other websites to load it via an iframe then they have reasons for it. The correct way of enabling such iframe is to get this particular website's permission, i.e. they should include your domain into X-Frame-Options as a trusted party.
When my website shared in Facebook messenger and such apps, it opens into a WebView.
My questions are:
Is there a way to force it to open in browser instead of the WebView?
As I see target="_blank" urls also loaded into WebView, is there a way to leave the WebView with hyperlink or JavaScript?
You can verify the UserAgent string on your server, to decide whether you should load the website or reject the request. You can refer to this SO to get insight of the UserAgent for Webview. However, app can easily by pass this check by setting the UserAgentString in Webview. This approach atleast helps you to black list some of the Webviews.
To conclude, there is no guaranteed way with which you can control whether Website will be loaded by WebBrowser or Webview.
No, you can't! why don't you built a custom script to manually detect whether web page is loaded into webView?
you can do following 2 things
if ur site is loaded into webView you can prompt "target='_blank'" to the user or manually request external browser to load that page.
if($_SERVER['HTTP_X_REQUESTED_WITH'] == "com.facebook.orca")
echo 'var isWebView=true;';
else
echo 'var isWebView=false;';
How can I post a link to my website in a Facebook post, and have it open in the user's external browser when using smartphone app, not Facebook's native browser, which is not displaying properly? My page is http://www.hannabery.com
On Android, you can use Firebase Dynamic Links to let user open specific URLs by external browser. I guess that Android webview is equipped with some Firebase SDKs, so this method only works on Android. User still opens link by in-app browser on iOS.
Create a project and a domain for dynamic links
Manually create the link like: https://DOMAIN.page.link/?link=YOUR_DEST_URL
(Or there're many other ways to create links)
For example, post this link on Facebook or Messenger and try it:
https://fugle.page.link/trade-landing-page
Note: Dynamic Links are mainly used to provide consistent and smooth UX across platforms and app installs. This is just a side effect I discovered may help to answer the question, and it may not last long and so should not be taken as the final solution.
Hope that this way can help you:
var ifc = document.createElement("div");
ifc.innerHTML = `<iframe src='${browserScheme}${target}' style='width:0;height:0;border:0; border:none;visibility: hidden;'></iframe>`;
document.body.appendChild(ifc);
Full sources and example: https://github.com/huantt/force-open-browser/tree/master
https://github.com/huantt/force-open-browser/tree/master I thought this one only worked when link is sent on messenger. But any link clicked on fb messenger is going to ask what browser you prefer. I used the code on my page and I posted the link on FB and it is opened by the FB browser. How annoying :(
This cant be done (for obvious security reasons) but there are ways
1.Create an app for your website
If you create an app for your website then theres no need for facebook in the middle of things
2.Create an app displaying facebook page
As long as its your page and not something misleading then this is allowed and you can do some pretty neat stuff in android studio
for example if you post a like
mywebsite.com/forum/
theres this cool function you can use .endsWith("/forum/") from there you can make your application do ANYTHING when a link is clicked that ends with "/forum/"
A few things ive done
Redirect to that link
open browser to display link
Move to portion of app
Display dialog boxs
and theres much more your able to do
If you are having issues with your PWA not running correctly in Facebooks (insert expletive) Mobile Browser. Using dynamic links will force it out to the regular browser. Don't use your custom domain though. Use https://YOURDOMAIN.page.link instead
https://firebase.google.com/docs/dynamic-links/custom-domains
also DO NOT skip the preview page!
I have the following requirement for my application (Android, iOS):
When the application launches it displays a login.html page (which is part of the application). After logging in, the application's webview should be occupied with home.jsp from an external domain. When user clicks on logout button in home.jsp it has to navigate back to login page . On click of logout when we usewindow.location.href="login.html" then it tries to find the page on xxx domain.
Is there a way to detect this navigation URL and override the URL from javascript or phonegap properties in the application?
When I inspect window.location.href in an android emulator I get file:///android_asset/www/index.html
But I think Nathans idea of moving it to the server is a good one. You could also have one on the device if you really need to. (PErhaps you should ask the person specifiying the app achitecture how they would do it :) )
The answer is going to vary depending on how you've implemented the mentioned WebView where home.jsp is being displayed in. You did not provide any code or any specific information so the answer is going to be the same - somewhat vague...
If you've opened a new WebView, then you can't control it from JavaScript. You'll need to control it via Java or Objective-C code (you did not mention which environment you're developing for...).
For example, if you'll look in the your-app\android\native\src\com\your-app\your-app.java file, you'll see how the native layer loads the application's index.html file after the Worklight JavaScript framework has been loaded.
Similarly, you could re-use this approach in your own application to close and re-load login.html.
If you're in fact doing the mentioned re-direct from the comments, meaning you're re-using the current webview but replacing its content with external content, then I think it is expected that you've lost the context of the application, and when looking for login.html - it doesn't find it... because you've moved from app-context to web-context. They do not know each other.
I think you should not do this re-direct. Instead, you need to open a new WebView using a Cordova plug-in, and in this new WebView to display your external content.
In this Overlayed WebView, you can detect any urls that are clicked on and if the sign-out URL was detected, then close the WebView.
You can see parts of this in action in the Integrating server-generated pages in hybrid applications tutorial and accompanying sample project.
In the sample project, you can see the functions provided (where you can add yours) in android\nativeResources\src\com\IncludeExternalPages\IncludeExternalPages.java.
I am facing problems when embedding external websites via iframe in my win 8 metro app.
I just do it the usual way like
<iframe src="http://d1303.de/boom.htm"></iframe>
If there is something seriously wrong on the embedded webpage (javascript errors..., like it is the case with http://d1303.de/boom.htm), my whole app crashes and Visual Studio complains about something in some script file deep in the included website.
Is there something special I have to take into account when dealing with remote iframes?
I've asked this question over at the msdn forums and finally got a helping answer from Steven Cheng here:
For Windows Store javascript based application, external web pages
referenced via iframe will be loaded in a different context than the
local pages (loaded from project content folders). Thus, the iframe
hosted external page will not be able to access some system APIs and
resources.
For your case, I don't think the iframe hosted external page should
cause the main Windows Store app (the host application) to crash. I've
created a simple test Windows Store javascript app (use the Navigation
project template) and add a page to show the
"http://d1303.de/boom.htm" page in an iframe element. Here is the
behavior I've got:
1) When starting through "Ctrl + F5", when navigate to the iframe
page, the page just failed to load iframe content since there is
script error.But the hosting app doesn't crash and I can still
navigate back to other pages to work well on other pages.
2) When starting through "F5" to debug the application, it will break
into Visual Studio when navigating to the iframe page. This is because
the default debug setting will break into VS IDE when there is
unhandled js exception occured in application (you can see the
configuration through "Debug --> Exceptions..." menu). Also, If I
choose "continue", the app can still go ahead and function(navigate to
other pages to work).
So the script error in the iframe referenced page will just break its
own page. For more information about the different context of web
pages loaded in javascript/html based windows store app, the following
book is quite good for you:
Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript
(First Preview)
http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx
Hi since in windows 8 you cannot inject from other domains, you cannot just embed you iframe inside your code but what you can do is :
you can make a div than you set the innerHTML inside the div with the response static to other URL, you can try like this :
---HTML---
<div id="container"></div>
---JS---
WinJS.xhr({
url: 'http://yourwebsitehere'
}).done(function (result) {
var domContainer = document.getElementById("container");
domContainer.innerHTML = toStaticHTML(result.response);
});
But it will not act like an iframe overall, but you can still use it, if you just want to show a page from other domains.
-Yusak Setiawan-
http://apptivate.ms/apps/1271/mathboard