I was following a jQuery tutorial and part of it was to use something that took a long time to load, such as iframes. I can't get iframes to work by themselves, in the following only w3schools works. What is going on?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This is a test</title>
</head>
<body>
<p>Hello.</p>
<p>
<iframe src="http://www.google.com"></iframe>
<iframe src="http://www.stackoverflow.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.yahoo.com"></iframe>
<iframe src="http://www.reddit.com/"></iframe>
</p>
<p>Goodbye</p>
</body>
</html>
Are there any other easy ways to have something take a long time to load in a HTML document? I tried using large images but it's a nuisance to download many of them and they get cached after first time.
The reason for this is, that Google/Satckoverflow is sending an "X-Frame-Options: SAMEORIGIN" response header. (You can set this thing either in IIS or in Page Header) This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.
The X-Frame-Options response header
Related
I can't seem to cache my JS files.
A simple test:
index.html
<iframe src="iframe.html" sandbox="allow-scripts"></iframe>
iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src s3.objectstorage.com;" />
</head>
<body>
<div id="root"></div>
<script src="http://s3.objectstorage.com/blah.js"></script>
</body>
</html>
If I change the sandbox attribute to include allow-same-origin, caching begins to work. However, I will be loading untrusted JS files, so I cannot allow that.
What are my options, so that my JS files are cached?
Update 1
Looks like I might be forced to download my raw JS from parent into an html blob, then reference the blob url for the iframe. Doesn't seem elegant, but will attempt tomorrow.
Update 2
There does not seem to be an adequate solution for loading within the iframe. I had to generate an html file with the script injected. Then, I load the html file in the iframe src. This does a disk cache, which seems to be sufficient for my purposes, and keep the iframe security.
So, I'm confused pretty severely... So I went to w3Schools iFrame page. Copy and pasted this code into codepen directly from w3schools...
<iframe src="https://www.w3schools.com"></iframe>
I also tried changing the URL a few times. Loading Google even didn't work... All that happens is a blank page with the same background color as the parent page. I dont understand why the iframe code even from w3schools doesn't work... Am i not loading a dependency? I'm using the latest version of chrome.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Soundcloud Downloader</title>
</head>
<body>
<div class="container">
<iframe src="http://1stdibs.com/"></iframe>
<iframe src="http://soundtake.net/"></iframe>
<iframe src="https://www.w3schools.com"></iframe>
</div>
</body>
</html>
A working code pen:
https://codepen.io/anon/pen/GEePEK
My view (screenshot):
http://imgur.com/a/6bPWB
Check this one
Checking if a website doesn't permit iframe embed and this one too Certain websites won't appear with Iframe and .load() function.
I had same problem few year back then i came through these,some sites avoid iframe tag.
I have a simple bit of HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe Practice</title>
</head>
<body>
<div>
<iframe src="//embed.gettyimages.com/embed/183351352?et=dbA2ZDFzQUqFbu8nRMfGww&sig=ozPqnsmwjm88sptsMM2UVS70lzd2ci-9q27BF6R0TzU=" width="507" height="407" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
When saved with .html extension and opened in a multiple browsers, I get a message saying "The file or directory could not be found." This is a very silly question, can somebody help me out with this?
Thanks!
You are using a scheme relative URI (one that begins with //).
This preserves the current scheme, so the content will load if you view it in a document hosted on http: or https: (normally you would get a security error if you tried to load an https: document into an http: document or vice versa).
You appear to not be using a web server, so you are trying to access the document via file: where it is not available.
You can either use an explicit scheme (replace // with http://) or do your testing on a web server (you can install one on your development system).
I'd generally recommend picking the latter option, there are many issues that crop up when you are testing documents on file: and using a development server bypasses them all.
Simply "//embed... in the iframe element's src property to http://embed....
<iframe src="http://embed.gettyimages.com/embed/183351352?et=dbA2ZDFzQUqFbu8nRMfGww&sig=ozPqnsmwjm88sptsMM2UVS70lzd2ci-9q27BF6R0TzU=" width="507" height="407" frameborder="0" scrolling="no"></iframe>
Are you trying to load the file locally with file://xxxxxxx You can not load and iframe this way you need to run it with a web server
I am doing some work that would require me building up html inside of embedded iframes. Sort of like jsbin does.
However I'm stumped with my very first spike.
How come my html isn't being rendered when I put it inside an iframe?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<iframe>
<html>
<head><meta charset=utf-8 /></head>
<body>
<h1>Big Header</h1>
</body>
</html>
</iframe>
</body>
</html>
Here's my jsbin.
Additionally when I tried drawing some svgs inside the iframe with d3 they came out looking all weird and not scaling. After opening dev tools and editing the svg text as html I found that even adding a non-meaningful space anywhere would get it to redraw and render correctly. So bonus points if anyone can tell me any resources I can read up on cause clearly iframes don't work like I thought.
iframes need to be pointed at a page to load. you don't put html between iframe tags. if you put anything between iframe tags - it is text you want to display in the case the browser the client is using doesn't support the tag. you should make the html above its own local html page, and point the iframe src attribute above to point at that web page.
After a day of research:
Like Mike said, html inside an iframe is for the case the browser does not support iframes and will not show up otherwise. However, it IS absolutely possible to construct a document inside an iframe on the fly and without a server-side query. To do this, you have to use javascript to construct the document. You can get a reference to it and write html like so:
var iframe = document.getElementsByTagName('iframe')[0];
,doc = iframe.contentDocument || iframe.contentWindow.document
;
doc.open();
doc.write('<p>Some html</p>');
do.close();
Note that as Remy mentions here the document must be opened before writing and closed after.
Ridiculous simple HTML-file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="refresh" content="5; URL=./test.html">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
When I open the file with any browser, the browsers behave well and reload the page every 5 seconds.
But when I refresh the page manually between two refreshes (F5), the IE (V 8.0.6001.18702) doesn't evaluate the meta tag anymore and the page gets no longer refreshed. Opera, FF and Safari still work as expected and refresh every 5 seconds.
Has anybody else experienced such a problem? How (apart of using Javascript, of course) could this issue be solved?
Edit 1:
Verified this behavior also on IE6, so I guess it's a general IE problem. Any hints how to overcome this?
Edit 2:
To keep that topic going:
is that a known problem or would it
be worth to file a bug ticket
somewhere (where?)?
Could someone
verify that behavior with IE7 and/or
IE9?
In IE 9 it works fine.
P.S. you missed a few quotation marks should be:
<meta http-equiv="refresh" content="5;" URL="./test.html">
As far as i know theres only the mta or javascript way.
Another option might be to use
header("Location: url");
if you can use php, its not really a refresh in it common way, but you could use to redirect to the same page again
As with the meta way, did you tried to put a full url? ( IE, arrg )
Generally speaking, use of the non-standard META-REFRESH is frowned upon by the standards bodies. Having said that, did you try with a fully qualified URL instead of the relative URL? If you're trying to reload the same page over and over again, did you try omitting the URL entirely?
Use this, I suspect your URL is not setup correctly
<html>
<head>
<meta http-equiv="refresh" content="1">
</head>
<body>
</body>
</html>
This always refresh itself.
Hope helps
:)
Javascript is going to be your friend for this one... it ends up working a lot better across browsers for the most part. Besides, meta-refresh is going out of style.
The following script and body onload attribute will continuously refresh the page every 5 seconds.
<html>
<head>
<script>
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
</script>
<noscript>
<meta http-equiv="refresh" content="5" />
</noscript>
</head>
<body onload="javascript:timedRefresh(5000)">
<!-- Content -->
</body>
</html>