iPad add to homepage stops site from working - iphone

I'm using the IOS simulator iPad/ ISO 4.3.2 (8H7)
I'm working on a web based app for the iPad, it works fine being viewed as a webpage on my local host.
However, when I click add to homepage button and access the site via the icon on the homepage.
All the 'a' tags stop working.
EDIT: I've found another post that people mention the same issue. See the second and third posts down.
iPad WebApp Full Screen in Safari

The only way I have been able to get this to work is by changing all my 'a' tags to the following.
a href="javascript:this.location = 'page.php'"
For some reason when you link with javascript it stays in the same window.

Related

Facebook Plugin not showing on my desktop or mobile, but appears fine on another desktop

I've been using the Facebook Plugin for years, on dozens of websites, but all of a sudden, I can only see the page's facebook header, the actual feed appears only as a spinning icon. This is on my desktop and mobile device, feed is at the bottom of the page. https://saltydogfestival.com
screenshot_mobile
However, my co-worker in the desk across from me tried it on his desktop and laptop and the feed loads just fine.
I'm not a page admin for this particular feed.
I have this plugin for other facebook pages, for which I AM an Admin, and those don't show up for me, either. I've tried using Chrome and Edge.
I'm knocking my head against the wall with this.... or maybe it's something so simple that I'm not seeing it... Suggestions??? Please save what's left of my sanity!
I think this issue has affected many sites including mine. I used a third party plugin recently that's said to no affect page speed. It's called "Buttonizer - Smart Floating Action Button" you can add a FB messenger button also and add call to action and any they button as well. I have disabled the Facebook chat one for now. If you can update me if it's now work for you that would be great as I'm in the same boat. Email mtgusto#outlook.com
Edited - bug seems resolved
This is what worked for me:
Go to Facebook Developers - Page Plugin and configure the 'widget' with desired params.
As you change the parameters the preview should update & show. If it doesn't, try signing out.
Click "Get Code" beneath the preview. I used the JavaScript SDK method.
Copy & paste the first piece of code after the < body > tag.
Copy & paste the second piece of code where the box should appear.
Previous answer - leaving here for posterity / reference
It seems to be an issue with Facebook that occurs when the visitor is signed in to Facebook. Try viewing the page in a private window or reload after you have signed out of Facebook to see if it loads when you are not signed in.
There's more information on a Facebook Developers bug report, which was just marked as closed 8/26, although it still appears to be happening: https://developers.facebook.com/support/bugs/584988619248795/
This other community thread has a work-around - look for Dave's comment: https://developers.facebook.com/community/threads/1018223139108570/

Embed facebook 360 video in UIWebView

Facebook has launched option to embed 360° video in web app. I am trying show embedded video in UIWebView. But its not working.
Here is my code,
let iStrEmbed = "<iframe src=\"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&height=281&appId\" width=\"500\" height=\"281\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\"></iframe>"
webVW.allowsInlineMediaPlayback = true
webVW.mediaPlaybackRequiresUserAction = false
webVW.loadHTMLString(iStrEmbed, baseURL: nil);
I have noticed its not working in even safari of mobile. Its working fine in all browsers on mac.
Is it supported only for desktop as of now?
As of now, yes- desktop only. I've had the most success on our custom-WordPress productions with the following hack via Facebook for Developers platform. Please try the following steps:
Upon selecting your Facebook360 video or photo, click on the ellipsis menu and select Embed.
Next, a dialogue-window will prompt- click on Advanced Settings.
Clicking the aforementioned will direct you to the Facebook for Developers platform; click here to see the instance created for the subject example.
Click on the Get Code button, which will prompt another dialogue box; then click on the iFrame tab and copy the code.
Copy the code contained within the iFrame tab.
Post and feature on desired section of web-app or website.
Although Facebook assures fellow developers that an easy WordPress integration will be released soon, as of this post, that remains to be seen; hopefully, we will see one soon for the sake of our clients because the solutions provided for the duration (subject example for WP):
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553"
data-width="500" da enter code hereta-allowfullscreen="true"></div>
aren't exactly responsive and sometimes fail to render as expected. Hope that helps!

Error when using mailto: link in Mobile Safari in app-capable mode

I've got a form in a web page with an action that is "mailto:email" (where email is a real email address). When I load this page in Mobile Safari in regular mode (ie, not launched from home screen with app-capable mode), this works fine - after I submit the form, the email app comes up. However, when I'm in app-capable mode and have launched from the home screen (so, no Safari chrome), and submit the form I get the error "URL can't be shown". However, a regular mailto: link (ie, not in a form) does work when in app-capable mode.
Has anyone else noticed this? Any workarounds? Are forms disallowed in app-capable mode?
Thanks,
Elisabeth
This accurately describes the issue. There is nothing wrong with the mailto link, the mailto link fails to load. Often the webapp crashes.
The funny thing is that tel: link for telephone numbers work fine.
window.location.replace does in-fact work. Thanks!
Here is the jQuery to fix this automatically...
$('a[href^=mailto]').click(function (event) {
event.preventDefault();
window.location.replace = $(this).attr('href');
return false;
});
I think I've figured this out. I noticed when in app-capable mode, any http link will take you out of the app and launch a separate mobile safari window, take you to the page and show the Safari chrome. Makes sense (typically one wouldn't link to anything from an "all in one" app-capable web app. I noticed this because I implemented a 4 page app with my own "tab bar" at the bottom and was linking amongst the .html files with plain http links in the a element. When I replace this with a javascript function to load the pages using document.location.replace this doesn't happen.
So, on the form - I think what must be happening is that because I'm using a scheme (in this case, mailto:) somehow the browser is needed in "regular mode" to interpret the scheme and do the right thing by launching the email app and this clearly doesn't work when submitting a form. I haven't yet found anything in the Apple documentation specifically about this, so if anyone knows the technical details, please do post!
UPDATE: I did find that I can access a server side script using a form in web-app mode, so I'm still curious about the mailto: issue, if anyone has an answer.
Thanks,
Elisabeth
I am having the exact same issue with mailto links not working in the web capable mode. I just got done submitting a bug report to Apple. Let's see what happens, meanwhile I found another dev. platform for web apps that works in web capable mode and mailto links work, but it is funny how it works in this even--it is not as fluid as it is in Safari. Because even in this new web dev tool that I found, it closes your app and launches mail client, which is lame. In Safari it just slides in a mail window that slides back out if you hit cancel or send--it doesn't actually close your app.
Here is a workaround that does not depend on JQuery:
aTmp = document.createElement("a");
aTmp.href="mailto:example#example.com?subject=Test&body=Hello.";
aTmp.click();
Update: To run this code from a bookmarklet you have to wait about 1000 ms before the bookmarks bezel is closed and the browser is ready to respond. I realized this by wrapping the code in a setTimeout function.

Possible to open iPhone Safari and target a specific window?

I have an app that uses OAuth to authenticate, which means the user must be directed to the website to authorize the application. I prefer to make it obvious to the user that they are using a standard browser to authorize at the original site rather than just using a web view to show the content within my app. However, every time they are directed to Safari (via openURL), it launches a new Safari window and once Safari has 8 windows open, it simply fails to work at all.
I'm wondering if there is an equivalen to the "target" attribute of an anchor tag in html which would allow me to cause all openURL calls from my application to open in the same window.
There is other functionality that I can expose via the web application, creating a hybrid app between native iphone functionality and web app functionality in Safari, but if I have to launch a new window every time I switch between the app and Safari, it becomes unworkable. The Youtube app is obviously able to return the user to the previous page after showing a video, but that might well be a custom plugin in Safari for iphone. Also, while returning to the previous page is somewhat useful, sending them to a new URL in the existing window really opens up a lot of possiblities.
I'm pretty sure there is no way to pass a target parameter to openURL:.
What I noticed about Safari is that it won't open another tab if the page you are opening with openURL: is/was already open in Safari. It just reloads that page. This might sound trivial and not helpful but perhaps you could use it to your advantage if you can make your web application only use one page. Different views or states could be expressed with #anchor tags.
An example is http://m.flickr.com. Notice their URL structure? It goes http://m.flickr.com/#/home, http://m.flickr.com/#/explore/interesting/, http://m.flickr.com/#/search and so on. All of these are different web pages to the user but to Safari it's all the same page.
I found iOS 6.0.1 Safari will open the same tab with a simple hashtag, without the slashes. So with the above example http://m.flickr.com, openURL to http://m.flickr.com#someinfo opens to the same tab.
In your webpage, use window.location.hash to return the params. In the above example it will return #someinfo.

Tell if WebApp launched via URL or link on iPhone home screen

Is there a way of telling whether my Web Application has been launched from a button on the user's iPhone home screen? I want to display a "add this WebApp to your home screen" prompt if the user has accessed the WebApp via safari by typing in a URL.
window.navigator.standalone
True if you have launched from the Home Screen. False if in the Safari browser.
Documented here:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
It works with OS 2.1 and up.
In Safari, the scrollY will start at a negative value if inside Safari, and at 0 if running as an application.
Likely the viewport will change as well (if it does, this is a more reliable method)
jQTouch detects this (try the demo). It's open source, so you should be able to find out how.
If I remember correctly there's a thing in the server log that shows what the user's previous page was. So the only way I can think of is if the user was on a previous page display the "add" thing, and if they didn't don't