We are developing a library portal for our university. On this library website, we usually share many links to many content providers.
We have a requirement to implement so that users can perform actions through out users' experience of the library website including when using third-party content providers' platform.
For example: a user clicks on a content provider, from within the library website, continues browsing and when coming across an interesting article they should be able to share and/or save this article URL.
We have tried through utilizing an iframe whereby content providers covers the upper 90% of the page while the bottom 10% are used for call-for-action (save, share, etc).
This has failed due to obvious security reasons and all most all browsers does not support this if frame content resides outside our domain.
An alternative solution would be to implement a Chrome extension to achieve the same. However, forcing users to use a specific browser is not a healthy practice. Also we will face issues with mobile users.
I would appreciate listening to suggested workarounds.
You could use an alternative of an iframe. I think when a user clicks on a link to a 3rd party content provider:
Your site captures that click event
Send the requested url to your server via AJAX
Your server access the requested site contents
Your server dumps the requsted url HMTL/Javascript contents onto a modal of size 90% pn the user's screen
The remaining 10% of the screen can be utilized for a toolbar or any controls you may want like sharing, saving the link etc.
Related
Essentially I would like to be able to use an appcache file on my site but only for mobile devices, to enable those devices to view the website/webapp I am developing offline, however desktops/laptops often have access to the internet and I would rather these view the site as is, with no manifest/caching etc..
I am aware user agent sniffing is at best unreliable although can provide some good results, if this could be avoided it would be best.
The site/webapp I am developing is built in HTML/CSS/JS/PHP and uses responsive layouts to serve the same pages of the site to each device with customised views/layouts depending on the devices width (using css media queries).
Thanks for any help in advance, all my searches for this specifically have proved unfruitful :(
Update
After Robertc's comments below I would like to clarify that it is Desktop Browsers (ie the very same browsers that are used on laptops) that I would like to exclude any caching from via appcache/manifest file... This is a requirement from client and also from me as programmatically it seems easier to target desktops and laptops together as they are using same software/OS...
More specifically my webapp needs to support caching via appcache/manifest on iOS, Android & Blackberry (although it would be nice to have all tablets/smartphones) so maybe the question is how to find one of these devices and include the appcache reference, however this looks like it is leading down the path of user agent sniffing which I was hoping to avoid...
Because the browser does check the Appcache.manifast before everything else happens, you have to do an additional serverside detection. You cannot load the appcache.manifest by javascript.
Make a Serverside detection on the Useragent and deliver the HTML with manifest if you get a request from iphone, ipad, android etc. and without manifest in the other cases.
User Agent checking is the best approach. You deliver your site for people who doesn't fake there User Agent.
User agent test with php for mobile devices (just add your devices you need):
Mobile regexp user agent
http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/
I have a PHP page (which is displayed through a mobile/android browser) - however, when accessing a link to an external site - it automatically redirects to the mobile version.
I want the link to take user to the desktop version of the webpage even when accessed through a mobile browser.
Is there a way i can specify useragent/or any other setting in my PHP page code to acheive this? Thanks.
Spoofing the user agent string will be a challenge, as it requires you to control the behavior of the browser. You might be able to do it with JavaScript or something, but I doubt it.
If it's just one site, you may wish to take a look at how they're handling redirection of mobile devices. Often, sites will provide mechanisms for overriding the redirect script.
For example, sites using the UC Mobile Web Framework (http://mwf.ucla.edu/) allows you to override their redirect script with a query string parameter. The UCSF Library (http://library.ucsf.edu/) is using that framework for mobile redirects. If you are on a mobile device and go to http://library.ucsf.edu/ then you will be redirected to the mobile version of the site. However, if you go to http://library.ucsf.edu/?ovrrdr=1 then you will get the desktop version.
What you are describing, no. You do not have control of an external site therefore you cannot control what is being served.
I'm trying to integrate a Flash Professional/AS3 game into Facebook. The swf is hosted on a secure (https) server. The swf has to connect to a SmartFoxPro socket server on another domain.
I'm using the Facebook Actionscript API to interface with Facebook. (Should I use PHP, instead? I read an article that recommends using PHP, because the Actionsrcipt API may not be kept up to date.) When I fire up my app, I get a "Security Information" pop-up box saying that the page contains both secure and nonsecure items. I click "yes" to all the display of the nonsecure items.
Then, I get an "XD Proxy blah-blah-blah" popup. This pop-up goes away, and then my app logs in to my SmartFox server.
So... What is this "XD Proxy" window? I think it looks unprofessional, and users may think there's an error with the app. Can I block or hide this window?
Also, can I block or hide the "Security Information" pop-up? Why don't I see this in other FB apps?
With regard to XD Proxy:
http://social.answers.microsoft.com/Forums/en-US/InternetExplorer/thread/fac1a0b0-fd15-482c-987c-57eba4c95c36
...When I fire up my app, I get a "Security Information" pop-up box saying that the page contains both secure and nonsecure items. I click "yes" to all the display of the nonsecure items.
The reason you are seeing this is because there are some elements on your page going through SSL and others that are not. Check to make sure the elements in your app are going through https:// (This includes images, links to CSS and JS files, links to SWF files, etc). I'm not sure about whether you need to have your flash element connect to your SmartFox server in a secure method, but if you can it would be a bonus.
I want to develop the mobile (also includes iphone,ipad,andriod) version of my original site. But I don't want to create another sub domain like www.m.mydomain.com, can i dynamically change the document root separately for mobile version and the existing one?
I have also noticed that, when I open facebook form iphone or any andriod mobile it opens with it's original domain name like http://www.facebook.com/ bt when i open it from any other mobile like nokia or samsung it comes with http://m.facebook.com/, what is the difference between this 2?
When it comes to iPhone and Android deveices, a website needs very little adjustments because their web browsering capabilities are really good.
For other devices where the web browsing user experience is less satisfying, the site would dynamically switch them to an alternate and less "intense" version of the website.
As for the m.domain.com feature, this is just a subdomain of the domain.com website. Obviously, it represents a mobile version of the main site and will strip out things like flash and javascript basically anything which will be too much for a basic mobile browser.
The dynamic switching of browsers is done via code. There are ways of detecting what browser just requested your website. Based on the information returned you can then redirect to specific scripts which will handle the user requests from then on.
As an example, you can use this standard argument to check the browsers visiting your site:
$_SERVER['HTTP_USER_AGENT']
Hope that helped.
You can differentiate it by User-Agent property either on Apache level, or PHP level. Though that will not be guaranteed because UA can be spoofed. (But how many mobile users would do UA spoofing to pretend they're not mobile?)
you could possibly use some solution:
create a specific mobile website and put it on folder/subdomain and redirect any user with mobile to that site, example: mydomain.com/m/ or m.mydomain.com
example on redirection:
http://detectmobilebrowsers.mobi/
http://mobiforge.com/developing/story/lightweight-device-detection-php
or
you could use responsive webdesign technique, some framework already available for this
http://csswizardry.com/inuitcss/
http://www.columnal.com/
http://stuffandnonsense.co.uk/projects/320andup/
The difference is that high end mobile devices like iphone/android have enough support and functionality to support the original version of the website (zooming/javascript etc). Other devices are better served an basic website developed for mobile devices with a limited display and/or support.
You do want an special URL for your mobile website - as you'd like your mobile website to correctly appear in the mobile search of search engines.
www is actually also a subdomain, but it is so often used, people do not usually realize it, Usually most browsers add it by default and this is why most servers have it enabled by default.
The case you pointed out is also of subdomains. The server check your HTTP request's user-agent and redirects you to the mobile subdomain appropriately.
This isn't really a quick solution for you, but I highly recommend reading Ethan Marcotte's Responsive Web Design articles on alistapart.org. He goes over the philosophy as well as the practical steps to make a site work well for different contexts - desktop browser to mobile device, etc. There are several articles on the site (just search for responsive web design you'll get several of his articles in your results.)
As an example, lets say I'm working with a product that requires I put <iframe>s onto my page, which then get embedded into my existing website.
The issue being my website is SSL, and the iframe comes from another origin which is not SSL.
I'm not worried about javascript here as the other origin cannot access the DOM due to same-origin, but my huge concern here is that annoying "mixed content" error in IE that pops up, or the broken lock in other browsers, etc. If a user doesn't know to click "no," they don't get the content-- which is critical to the website.
What I want to do instead is provide a way to take this content and scoop it into my own script so it sends to the browser from my domain with my SSL certificate, for all resources it links to (ie, recursively parse the file and send the resources as my own). I realize this could open a huge hole because it's now coming from my origin.
What recommended approach should I take to get third party content to land on my site? Right now the content I'm pulling is the base HTML file, the CSS, and 9 images, all of which are dynamic. This is simmilar to a proxy I suppose.
What I want to do instead is provide a way to take this content and scoop it into my own script so it sends to the browser from my domain with my SSL certificate, for all resources it links to (ie, recursively parse the file and send the resources as my own). I realize this could open a huge hole because it's now coming from my origin.
Get a separate domain (mydomain.com -> thirdpartyname.mydomain-proxy.com) to serve as an HTTPS proxy for third-party content. That way they cannot run JavaScript in the same origin as your website.
Alternatively: Pressure them to adopt HTTPS. It's fast and it's free.