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.
Related
I am trying to write some HTML5 standards compliant code, where certain scripts need to be run only after the user has consented to cookies.
The html code looks like this, where the consent-script element, works exactly the same as the script element, however holds off loading the script until the consent has been given.
<head>
<consent-script src="myscript.js"></consent-script>
</head>
Everything works fine in all browsers,
However when I attempt to validate this using https://validator.w3.org/ , the custom-element tag apparently closes the head section, and generates a pile of errors.
Looking at the specifications, I can't see any reason why custom-elements cant be used in the section. But I am not sure.
My question is, can HTML5 custom-elements be used in HEAD? If I can, then its a bug in the validator service. If not, then I will have to find another way of not running a script until the right moment.
Thanks.
EDIT. Further investigation (Thanks #Danny'365CSI'Engelman) leads me to believe that even a browser is moving the custom element out of the head section, into the body section.
Some mock up code:
The source is:
<!DOCTYPE html>
<html>
<head>
<my-custom-elem></my-custom-elem>
<!-- other tags in the HEAD -->
</head>
<body>this is the body
</body>
</html>
Yet, chrome developer tools gives me:
<html>
<head>
</head>
<body>
<my-custom-elem></my-custom-elem>
<!-- other tags in the HEAD -->
this is the body
</body></html>
I am in the process of building a website and the browser keeps rearranging my HTML for some unknown reason. This is my code:
<DOCTYPE! html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
And here is a screenshot of what the browser uses:
(Sorry, don't have enough reputation to insert a real image)
This is all fine except when I want to use link to link an icon to the page, and it won't display unless it's in the head (I used the browser's dev tool and literally dragged the link up to the head and watched it appear immediately)
I've checked the source using the browser's developer tool and it looks exactly the same as in my code editor, so I know my web server isn't messing with it.
It does the same in Chrome and Firefox. It appears that they both use the head for script when a browser extension decides to put it there, but it does this even with no browser extensions.
I have tried the Notepad++ Encoding -> Convert to UTF-8 trick to remove the BOM character which supposedly fixes my issue but that did no good.
So how can I make the web page display as I wrote it?
Here is a download link to the file with the code snippet seen above:
http://www.filedropper.com/testpage_1
Thanks for any help!
Your Doctype is invalid. Error recovery is causing it to be treated as text. Since text is not allowed outside the body, it implies the start of the body element.
The correct syntax is:
<!DOCTYPE html>
The exclamation mark needs to be the second character.
This would have been picked up if you had used a validator.
I created a test page with your code and I can confirm that the developer tools show it like that. However, there is a typo in the DOCTYPE. Change the code to the following to fix it:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
The difference is that the exclamation mark needs to be before DOCTYPE, not after it. See The DOCTYPE in the HTML5 specification, which also points out that <!DOCTYPE html> is not case sensitive.
Parent domain: www.parent.com
Iframe domain: www.iframe.com
<html>
<head></head>
<body>
<iframe id="trick" src="www.iframe.com/test">
<html>
<head></head>
<body>
test
</body>
</html>
</body>
</html>
Question: how to access the value of href of anchor tag inside iframe using jquery?
Since they pages appear on different origins:
The page containing the frame needs to listen for a Message event.
The page inside the frame needs to send a message using postMessage.
This, obviously, requires changes on both sites. Explicit co-operation between the sites is required for obvious security reasons (if they aren't obvious, imagine your bank's website being loaded in an iframe by a random site you visited via Google).
Check this link: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
$('#iframeID').contents().find('#someID').html();
I notice the Chrome browser automatically creates hyperlinks for web address references that are not anchor tags. I have a page which will list web addresses (e.g.: www.mycompany.com). But in this instance having them converted to links makes things more confusing.
Is there an html tag I can use to prevent this?
I just create a file that I called test.html with the following content:
<html>
<head>
</head>
<body>
<p>
www.microsoft.com
</p>
</body>
</html>
I opened it in Google Chrome.
The text is not hyper-linked.
There might be something else going on you are not describing. Can you give an html that can reproduce your problem?
It can be settings related or you might have some javascript on your page that "linkifying" whatever looks like a url. Or a browser plugin.
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>