Google docs iframe not working on mobile devices - html

I hope someone can help. I am trying to embed an editable google doc into an iFrame, I am currently using
<iframe src="https://docs.google.com/document/d/1bYwsERISJ8-jnn-tgDiMwkQEop1YvP41JZqhUQmYbHc/edit?widget=false&chrome=false&headers=false&gridlines=false&embedded=true" width='1000' height='800' seamless="seamless" scrolling="no"></iframe>
which is a shared test document. This works fine on my windows desktop but does not work on any mobile devices e.g. Android phone, iPad.
Any ideas why or what I could be doing wrong?
Update 1
Perhaps having a URL with test will may be helpful http://google-test.itproz.co.uk

Looks like this is a known issue with no resolution from Google: https://productforums.google.com/forum/?hl=ta#!topic/docs/WPMBrNIcLWU
I'm troubleshooting the same issue on another site and if I find out anything, I'll post here.

Related

HTML Iframe work with widevinecdm chrome component?

I am trying to iframe a website for some testing purposes. I have used a chrome extension that allows you to iframe any website. Problem is that with some websites I get the error about widevinecdm. Is it possible to let an iframe use widevinecdm from the chrome browser? Or is there a bypass or someway to get passes this error?
I found a doc for this: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes
Simply use the allow="encrypted-media *;" attribute on your iframe element, such as:
<iframe src="https://google.com" allow="encrypted-media *;"></iframe>
I hope this helps someone in the future.

How to open iOS share menu via HTML

I'm currently working on a webpage and I'd like to implement a function to share this website to friends of the website-visitor.
Therefore I've integrated the Whatsapp-sharing URL Scheme.
<a href="whatsapp://send?text=text-to-share" data-action="share/whatsapp/share">
share-button
</a>
But there is a better way in iOS - I'd like to open the iOS-share-menue:
iOS sharing-interface
Do you know, if there is any possibility to open this?
The iOS-Amazon-App does this within the product-pages.
I'm looking forward to your answers.
best regards,
Christoph
Google has introduced the Web Share API for Web applications in Chrome. I think your problem is similar to this question. https://stackoverflow.com/a/42081215/4711785
Here is a link to a page which provides information on how this can be done and also a link to an example of this working...
(I have not copied the code from the article or the W3C source into my answer in case this is some sort of copyright violation)
https://w3c.github.io/web-share/
I have tested this on safari, chrome, and edge on IOS and macOS as of Oct 2022 and it worked perfectly...
I also tested it on the Opera browser running on a Huawei phone running their OS (not android) and again it invoked the OS'es share menu...
I fully expect this to work just as well on Windows and Android devices but I don't have any to test with...
Info and code to make it work: Web.dev article
and,
An example page you can use to test your device/browser...
open device share menu using web page button demo

Facebook link on mobile should open the facebook app and not the browser

On the mobile version of the website I created
I tried to link to the Facebook app with the following code
fb://page/[pageID]
It works perfectly on iOS, but on Android it will work with the following code
fb://profile/[pageID]
Does anyone know a solution? Maybe some JavaScript to detect the device and then change the URL for that device.
I solved the problem by doing this, maybee someone else can use it,
the classes hideonmobile & hideonbigscreen are display:none in the right media query
<div class="hideonmobile"></div> <div class="hideonbigscreen"></div>

Google Maps Embed not working on IE

I am embedding google map in my page. While it works fine on chrome and FF, it doesn't display in IE. I looked up extensively and tried changing the mode from embed to View. That didn't work either.
<iframe width="95%" height="460px" frameborder="0" style="border: 0;" src="https://www.google.com/maps/embed/v1/place?key=MYAPIKEYHERE
&q=120+S+Street+Name,+City,+CA+93117"> </iframe>
I looked on Google APi site to see if its not supported for IE. There was nothing mentioned about that there either.
Any thoughts?
Apparently this is a known issue, caused when the page is running compatibility mode.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=7675
According to Google, they are actively working on a fix.

iframe Google maps won't print in chrome

Since the latest Google maps update, I'm unable to print the map via my chrome browser.
If I try to print it with firefox, and have a look at the preview, the map shows up.
My code:
<iframe width="600" height="300" marginheight="0"
src="http://maps.google.com/maps?ie=UTF8&q=loc:{address} {number}#{latitude},{longitude}&z=14&output=embed&iwloc=near"
frameborder="0" marginwidth="0" scrolling="no">
</iframe>
It displays the following (in chrome):
And if I try to print it, I get:
While in Firefox and Safari, it shows up perfect.
I assume that this is a chrome issue? (I've tested it on different chrome browsers, on different computers, both MAC and PC)
Or is there something I'm missing, or that I should add with the new maps.
Small detail, if I Go to the developer site of google maps (https://developers.google.com/maps/documentation/embed/guide) and I try to print it from there, it won't print either. Which I think is strange, since both maps and chrome are build by Google.
Does anybody else have this issue, or is it just me? And if it is just me, what am I doing wrong?
(My chrome version: 33.0.1750.152, working on OSX 10.9.2)
I have read and studied too much about this, and unfortunatelly there is no solution to this, to print the iframe insertion using Chrome. I also don´t know the reasons, so I decided to change, to improve! :)
I easyly changed my html codes to use the Google API, then it becomes to print the map again.
In my searches around the web, I found and started to use a very simple to implement jQuery plugin for Google Maps, called $goMAP(); Cons: you need to have a little bit of jQuery and JSON knowledge.
In the Example Page you can find a lot of implementations, I know one of it will fits to you.
And If you need more technical information, you can find whatelse you need in the Google Maps API.
These are some complementary URLs I´ve read before to adopt the solution:
https://code.google.com/p/chromium/issues/detail?id=353937
http://themeforest.net/forums/thread/google-maps-iframe-issue-in-chrome/110324
I hope not have disapointed you, but helped instead :)
Daniel
I have recently been having same problem but discovered that when Chrome's "Strict site isolation" feature is enabled the map iframes do not print, disable the feature and they all work
See:
chrome://flags/
#enable-site-per-process