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.
Related
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 using HTML HELP Workshop to create help file. My problem is when I center an image in HTML, the picture always appears placed in the extreme left of the CHM file. But I've found the image in the middle in the internet browser (Internet Explorer).
I want the image to placed in the center of CHM file and Internet browser. This is my HTML:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<meta name="GENERATOR" content="Microsoft® HTML Help Workshop 4.1">
<Title>Picture</Title>
</HEAD>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<BODY><img src="C:\Users\LENOVO\Desktop\cd\help\Graph.htm_Images\image.png" alt="Home Appliances Data " ;></BODY>
</HTML>
You need to add following line in your <head> section by using e. g. your favorite text editor.
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Please note that IE9 on Windows 7 (and all other recent versions of the major browsers) can properly render your content used in your question.
Unfortunately if you take your content and run it through the HTML Help Workshop compiler to produce a CHM file the resulting output on the same machine looks a bit different. Please note CHM's are 20 years old!
Although the page display and functionality still works inside the Microsoft Windows Help Viewer, all the extra styling features are gone. This is true even though running a test on a Windows 10 Home Version 1903 machine that has IE11 installed that should be able to render these CSS features.
Tested today with the original HTML code you posted, using FAR HTML and HTMLHelp Workshop installed on my machine.
Adding the <meta> tag from above is also needed for using SVG inside CHM files.
A comprehensive answer was given for following question:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
You could try to use margin: 0 auto; instead of margin-left: auto; & margin-right: auto;
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 recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
I'm developing an HTML widget that will be deployed on a client's mobile site. When activated the widget must take up 100% of the screen at all times. The problem I'm running into is that the widget isn't always 100% of the screen due to the user being able to zoom. I'm unable to changed the meta tag (see below) for zooming because the client allows zooming outside of the widget.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have a feeling that I could probably iFrame the widget content, set the meta tag there, and be isolated from the rest of the site, but I'm not sure if that's the best solution.
TL;DR: What's the best solution for disallowing zoom on a specific HTML container?
You would use hammer.js to detect a "pinch zoom" gesture, and the library gives you a very detailed event.gesture object which you can use to detect how much/how fast the user is zooming. After you connect hammer.js, you can disable zoom with:
behavior:
contentZooming: "none"