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"
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?
Hopefully I can explain this correctly. I have recently been moved to a Windows 10 VM from Windows 7 and I'm trying to get a site for my team at work to display properly in Edge. I have a WebPart linking to CSS that is displaying everything as one large list instead of a table with dropdowns. When I open the HTML page on its own in Edge it displays fine, but with code in SharePoint it is not working correctly. Any ideas of why this could happen?
What should display
What is displaying in SharePoint
EDIT
After opening developer tools I find that I am receiving a SEC7111 error code on my CSS file that is being linked. Looking other places for solutions to this too, but any help is greatly appreciated!
FINAL EDIT
With the SEC7111 error I found out that the "file://" links I used for the CSS weren't going to work because they weren't considered "secure" (Although I got the same error in IE, but never had this display issue..?) So, I moved my linked CSS file to a secure folder in another SharePoint site I have, linked the CSS from there, and now it's working!
There are some ways that you can use to solve your problem (It's better to share your code within your question to get a better answer). So, I offer you below solutions:
Solution 1
Please don't use file:// for the published site in the webserver. HTML rendered on the client so you cannot access the local files. so you should not use the file://. you can read more about security concerns and more details on the file protocol here: (https://en.wikipedia.org/wiki/File_URI_scheme)
Instead of using local file protocol, you can use the Absolute/Relative path to your CSS on the HTTP/HTTPS protocols
Solution 2
Add X-UA-Compatible meta tag or HTTP response header to force IE to run with legacy document mode: 5, 7, 8.
X-UA-Compatible meta tag:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...
</head>
<body>
</body>
</html>
X-UA-Compatible HTTP response header:
It's just a simple page for now however the background colour and image do not appear properly on the uploaded site, but are fine in the local files. Moreover, the website appears different when using with and without the www prefix.
[EDIT - I see either a white blank page, or one with a squashed logo in the middle of the page. I've tried with chrome, edge, on mobile and desktop, and with/without incognito mode.]
http://swedge.design/
http://www.swedge.design/
https://imgur.com/fk8UufL [ what it looks like through swed...]
https://imgur.com/aqTTwPP [ what it looks like through www.swed...]
and what it looks like locally
I've checked it using the W3 markup validation service and corrected those errors. I can't see any errors on the console either, and have had other people check, and checked on my phone as well, so it can't be a cache problem.
<!DOCTYPE html>
<html lang="en">
<head>
<title> swedge.</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/favicon.ico">
<meta charset="UTF-8">
</head>
<body>
<div><img src ="swedge.png" alt = "">
</div>
</body>
</html>
CSS
body
{
background-color: #333333;
}
div {
top:0;
left:0;
}
div img {
position:fixed;
top:0;
left:0;
height: 200 px;
width: 200px;
}
I've had a search around but everything seems to point to either errors in the code, or a cache needing cleared.
As now two other persons mentioned here: For us the online version looks just like your screenshot. This is good news for you, but why did it not work for you but for us?
This is a very usual problem encountered in web development and caused by caching. You most likely opened the webpage before you deployed the final version. Your browser or a CDN server cached the old files and when you reloaded the page after the final deployment those old files broke the web page as the page is now half new and half old.
The easiest way to check for caching issues is to open the web page in an incognito window/tab. The incognito mode does not share the caches, thus it is like you would open the webpage for the first time. After closing and opening a new incognito window, caches are reset again.
In Chrome you can also left click on the reload icon while the developer tools are open and select "hard reload" to manually invalidate all caches and reload everything.
Please not that both methods will not work when the caching issue is caused by a CDN server, as your browser will receive the outdated files again from the CDN. In this case you need to wait until the CDN drops your files from the cache.
You can control this behaviour with the cache control headers (browser and CDN). Shorter or no cache times will reduce this issue but will increase the load on your servers.
Edit:
You mentioned in an other comment that, you already tried incognito mode. This means that the issue is most likely caused by a CDN. You can check the HTTP response headers for caching directives.
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
I'm getting a red error when I click on any local url inside the app it says.
Can't open same-window link to "chrome-extension://nmajpganl/options.html"; try target="_blank". index.html:1
Is there a way to link locally with permissions? Or do I have to rewrite everything to be on one page?
I think this is related to the Chrome Manifest Sandbox .. needing to include all the pages you will link to? Can anyone confirm this?
Packaged apps aren't websites. A principal difference between apps and websites is there's no navigation. You have a few options:
Create a window for your options the same way you did for your main window.
As you say, rewrite the app to manipulate the main window's DOM rather than "replacing the DOM with that of a new location" (a fancy way to say navigation).
Use <webview>. It's very unlikely (assuming options means something like a prefs page) that this is what you want. But you could do it.
As the error message says, use target=_blank and figure out a way for a normal Chrome tab to open it (e.g., host it on a website). For your application, this approach would be insanity.
The right answer is here, but it seems to have been dismissed, so let me expand on it. iframe's are not allowed to visit other sites, but you can use one a wrapper around all your local stuff. Something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1" />
<style>
html, body, iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
border: none;
overflow: hidden;
}
</style>
</head>
<body><iframe src="index.html"></iframe></body>
</html>
Those meta tags probably aren't needed, but I use them everywhere.
This seems to solve the problem of navigation within a multi-html-page local app.
The New Chrome Packaged Apps do not support navigation. You can either create new window or replace the content in body or use webview tag of the app.
You can use an <iframe> inside your main.html.