We are developing a cross platform app and facing issues at the uses of iFrame only.
Page in iFrame is not loading properly and having issues while scrolling, after some time app is crashing.
But app is working fine on android.
Is there any issues related to or specific to the uses of iFrame on iOS?
Code we are using:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 , minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
</head>
<body>
Test Page
<iframe src="http://www.devicepixelratio.com/" style="height: 400px;"></iframe>
</body>
</html>
Getting error:
Error Domain=NSURLErrorDomain Code=-999 "The operation couldn’t be completed. (NSURLErrorDomain error -999.)" UserInfo=0x18474b30 {NSErrorFailingURLKey=requested_URL, NSErrorFailingURLStringKey=requested_URL}
When I open the website www.devicepixelratio.com in Safari on my Mac and I got the following error message in the debug console:
Blocked a frame with origin "http://googleads.g.doubleclick.net" from accessing a frame with origin "http://www.devicepixelratio.com". Protocols, domains, and ports must match.
This error occurs 9 times every time I load the page. It appears to be an issue with cross domain scripting, which is most likely throwing an error in the UIWebView and causing the crash. I'm not sure what server type you're using, so I won't attempt to help you with the CORS setup, but here's a link to another Stack Overflow question with many answers that may help:
Javascript errors from Google Adsense
Related
I have a website redirecting traffic to Kayak.com, lately I noticed users that have the Kayak app installed (iOS / Android) on their device, are being redirected to the app, instead of remaining in the browser.
Sometimes the users would get a question "Open in the kayak app?", while for others it will immediately open the Kayak app.
I wanted to ask how to disable this behavior?
I want all users to remain within the browser, just open the URL in the browser without opening the app (similar behavior to Desktop).
The HTML redirection code:
<!DOCTYPE html>
<html>
<head>
<h1> HTML redirection - how to avoid opening on the app / offering "open in the app?" </h1>
</head>
<body>
<meta http-equiv="Refresh" content="1;url=https://www.kayak.com" />
</body>
</html>
I don't have control of app installations or Kayak's website behavior.
I have tried replacing the HTML redirection with PHP redirection,
And tried JS redirection as well.
Both approaches result in the same outcome (opens in the app / offers to open the app).
For convenient testings I added this code to a web page :
http://www.hotels-bargains.com/htmlredirection.php
Any idea on how to keep the users inside the browser?
There is an html page that works correctly on any Windows and Android (shows content of iframe). Hosting by Github Pages. It works on iOS version 12.5.1, but no on 14.6 (blank page on Chrome, Safari, Opera). Why?
Tried src with wikipedia - ok everything. The problem narrows down to a combination of iframe and src of apps script (that opens separately correctly)
Assume that the problem was mixed http/https according to post. Just http was in style http://www.w3.org/2000/svg, I changed to https (even removed all styles). No effect.
No log errors, just blank page. Seems like trying to load, but break and stop. I haven't ios device to debug. Feedback user.
If you have iOS 14, can try open this site. What you see blank page or access error?
Error like the next is right. It tell about you haven't access.
Refused to display 'accounts.google.com/…' in a frame because it set 'X-Frame-Options' to 'DENY
If you sign in Google Account and try again, will be error from Google Drive. I have all this on any platform in incognito mode. Don't pay attention to them.
Only interested in the case of a blank screen/stop loading like screenshot below
iOS 14.6
Windows
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goofy</title>
<style>
html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }
</style>
</head>
<body>
<iframe src="https://script.google.com/macros/s/AKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT/exec"></iframe>
</body>
</html>
Apps Script render page with XFrameOptionsMode.ALLOWALL
function doGet() {
return HtmlService.createHtmlOutputFromFile('launch.html')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Cookies for cross-site resources are now blocked by default (iOS 13+). Source. Other platform (iOS 12, Windows, Android) while aren't do this. Such cookies need to verify user on github.io with iframe and google src. That's why I see the blank page on iOS 14.
Solve is go to browser's setting and allow 3rd party cookies.
Thanks Shivam's answer
It’s browser side problem. Due to 3rd party cookies, Safari will block the content. Unless user set on their own, the preference to allow all cookies. Until now, I only know Safari that will do this action. Other browser, i think all okay with content in iframe that come from 3rd party.
You can't frame certain websites, because the server won't allow you for security reasons (Imagine that a random page iframes your gmail and steals all your data). So you will have to modify the macro on google scripts and maybe ask other question for what you are trying to do. X-Frame-Options
i have create an iframe look like this :
<iframe src="https://mychatbot.com/chat?token= adadasdasd>
it doesn't work/load in IOS device
But when i change that iframe to
<iframe src="//mychatbot.com/chat?token=adadasdasd>
And bammm, it work !!! i think we just need get rid of http/https out of our "src"
I'm trying to build a simple single HTML page that can be launched when offline (on Android, if that matters).
I'm using the Web App Manifest to give the app a name for adding to the home screen and display fullscreen with no browser chrome. This much works.
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="mf.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>
This does not appear to be cached when offline. Separately, I can make a page which is cached offline using the application cache:
<!DOCTYPE html>
<html manifest="mf.appcache">
<head>
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>
However, when I try to combine these two (so I can have an offline-cached page that launches fullscreen), the Web App Manifest is ignored and I only get the offline behaviour as in the second example.
What I ultimately want is a single page that can be added to the home screen, that opens full screen with no browser/OS chrome at all, and is cached for use offline. A solution that works just on Android using Chrome 65 is acceptable.
That's an interesting dilemma! I wonder if you would have better luck using
<link rel="manifest" href="/manifest.json"> as described by Google. Here's a link to their recommendations for the Web App Manifest.
The Web App Capable meta tag is primarily for full screen capabilities. If you want caching specifically, I think using the http-equiv="cache-control" header tag and its directives is closer to what you're trying to accomplish. Especially since Service workers aren't globally supported yet. I found a decent explanation on HTML caching here on stack: "How to set HTTP headers for cache-control."
Edit: another user has pointed out that Chrome will not honor this tag if a display is set up in the manifest file
The Service Workers feature provides the same capabilities as the deprecated Application Cache.
MDN has an article on Using Service Workers which I found very helpful in implementing what I needed to replace the Application Cache.
I am facing an issue with mobile version of my site. The site is hosted on a different domain.
I Tracked down the issue and saw that its being caused by the being wrapped on top of my actual html code.
Here is a snippet:
<html>
<head>
<title>Where are you</title>
<meta name="robots" content="noindex, nofollow">
<meta name="description" content="Let’s your friends and family know about your where about.">
<meta name="keywords" content="Stay connected, Plan meetup, Unreachable friend, Share location, Share photos">
</head>
<frameset rows="100%">
<frameset cols="100%">
<frame src="http://wru.buttur.com" frameborder="0">
#document
</frameset>
</frameset>
</html>
My website is getting loaded inside "#document".
Can i do some configuration on my domain to prevent this from happening.
I know this is old, but I am responding because we had a similar problem where some outside entity managed a website, and we took over after it became broken.
It was a wordpress site and everything was being wrapped inside a frameset. We were baffled by the fact that direct browser requests to hosted javascript files would work fine, but within the page it would become wrapped in frames in the network response.
Even direct jQuery.getScript() calls from external sites would exhibit the scenario. Again, worked fine if typed into browser url bar.
Turns out there's something called DNS frame forwarding.
Here's a topic that covers the scenario:
https://stackoverflow.com/questions/7083391/godaddy-dns-forward-to-ip-adds-frames-to-html
Edit:
Looks like a moderator removed that post. How strange!! Too bad as well, that post had exactly the right answer with exactly the right description.
Well basically anyone coming across this, just research DNS frame forwarding. You'll find your answer there.
Terms for google:
website wrapped in frameset
javascript responds in frame
css in frame
Resource interpreted as Stylesheet but transferred with MIME type text/html
Uncaught SyntaxError: Unexpected token <
I got a code that refreshes the html page as per the seconds I desire. I am on an Mac and I use the TextEdit app to make the HTML file. This code works for www.apple.com but it does not work for say, https://www.bitcointalk.org or http://www.macrumors.com.
I am not sure why this is happening. All I am doing is replacing the apple URL with bitcointalk url. I know I can also do this refreshing via Safari extension, but I need this code to work.
Thanks a lot
The code I am using is:
<html>
<head>
<meta http-equiv="refresh" content="5">
</head>
<FRAMESET>
<FRAME src="http://www.apple.com/">;
</FRAMESET>
</html>
EDIT: What I am trying to do is, create this html and move it to my iPhone, so that I can do the web refresh through my phone. Right now there are only paid apps in the App store that lets you refresh a page automatically every few seconds/minute and they are not really that good.
As #esqew pointed out in their comment, the sites that aren't showing up forbid access via frames by setting the X-Frame-Options HTTP header to DENY or SAMEORIGIN.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options