For instance, is this valid?
<!doctype html>
<html>
<head>
<title>Some Iframes</title>
</head>
<body>
<iframe id="frame1" src="/html/test-frame.html"></iframe>
<iframe id="frame2" src="/html/test-frame.html"></iframe>
</body>
</html>
Where the file test-frame.html has the contents:
<!doctype html>
<html>
<head>
<title>Test Iframe</title>
</head>
<body>
<button id="subscribe">Subscribe</button>
</body>
</html>
I would like to be able to use the same html and the same scripts for a set of iframes.
That's acceptable and valid. As each page is self-contained and therefore has its own individual namespace and DOM, there's no harm in using the same ID across iframes as long as it only occurs once within each iframe document.
Each page inside of an iframe is totally self-contained and unique.
You can have a page and 4 iframes, and each one can have an element called "#the-element".
Of course, the code that you have there is invalid, but if each loaded its own separate HTML, that would be perfectly acceptable.
Related
This one got me really stumped. I have stripped a problematic website of basically everything, being left with the most trivial barebone site you can imagine:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test site</title>
</head>
<body>
<img src="http://placekitten.com/200/300" />
</body>
</html>
...and yet, the img tag doesn't work. I get an empty website - and the W3 validator throws errors like Element img not allowed as child of element body in this context. (Suppressing further errors from this subtree.). What am I doing wrong? I have no idea what can be causing issues in a markup that consists of basically no elements other than the img and the ones required.
<!DOCTYPE html>
<html>
<body>
<img src="http://placekitten.com/200/300" alt="W3Schools.com"
style="width:104px;height:142px;">
</body>
</html>
As mentioned in the comment, there were 2 invisible characters after img and src.
I used text-compare to figure out this, please refer the attached screenshot.
I want to store an entire HTML document to put in an iframe (srcdoc) later.
Am I allowed to put everything in a template including the html, head and body like this?
<template>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>Content</main>
</body>
</html>
</template>
If not, what's the best way to store an entire document? Thanks!
Unfortunately, the template tag is not allowed to contain <html> tags. per 4.1.1 of the HTML specification:
Contexts in which [the <html>] element can be used:
As document's document element.
Wherever a subdocument fragment is allowed in a compound document.
and from 4.12.3, the <template> tag does not provide either of these contexts. For the same reason, you can't use <head>, <body> or <title> tags either. Chrome and Firefox both actively strip out the invalid tags from the <template>, preventing you from using it.
The best way of storing HTML for use in iframes is to put the HTML code in a different file in your web server.
However, an acceptable alternative is to store the HTML inside your <iframe>, then populating the srcdoc attribute with the content.
<iframe id="yourIframe">
<!-- Everything inside here is interpreted as text, meaning you can even put doctypes here. This is legal, per 12.2.6.4.7 and 4.8.5 of the HTML specification. -->
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>Content</main>
</body>
</html>
</iframe>
...
<script>
...
const iframe = document.getElementById("yourIframe");
iframe.srcdoc = iframe.innerHTML;
</script>
Is it possible wrap an HTML document within another, all within the same file? Such as:
<!DOCTYPE html>
<html>
<body>
...
<!DOCTYPE html>
<html>
<body>...</body>
</html>
...
</html>
Why would I want to do that, you ask? (I don't :-) ) The phpinfo() function in PHP generates a full HTML document (to be used as a single call, on its own). I created an HTML document around it. Most browsers display this as I expected, but it is invalid HTML.
<!DOCTYPE html>
<html>
<body>
<h1>PHP Info</H1>
<?php phpinfo(); ?>
</body>
</html>
I can solve this with PHP, but I was for an HTML-only solution; something like:
...
<xframe>
<!DOCTYPE html>
<html>
<body>...</body>
</html>
</xframe>
...
I.e., something like <iframe> without the external reference.
Not as such.
The closest you could come would be to use an iframe with the src expressed as a data: scheme URL (which encodes the entire HTML document inside the URL itself) … but that would require phpinfo() to return a string of HTML instead of just outputting it.
I'm trying to split html file into 2 different files:
<html>
<head>
</head>
<body>
<frameset cols="25%,75%">
<frame src="addNewEvent.html" />
<frame src="totalEvents.html" />
</frameset>
</body>
</html>
addNewEvent.html:
<html>
<head>
</head>
<body>
Left
</body>
</html>
totalEvents.html:
<html>
<head>
</head>
<body>
Right
</body>
</html>
The 3 files (main html and addNewEvent.html, totalEvents.html) are in the same directory.
(I just learning html, so for now, I'm not using server, and open the main page with the browser.
When opening the main page in the browser, is seems that the addNewEvent.html, totalEvents.html are not loaded. (There is no error in console log)
What an I doing wrong ?
Is it right to split the page into little pages with frameset ?
What an I doing wrong ?
You didn't use a validator which would have told you that a <frameset> element is not allowed inside a <body> element.
Frameset documents have a <frameset> instead of a <body> element. Since the HTML document already had its own <body>, the browser ignored the <frameset>.
Is it right to split the page into little pages with frameset ?
That's largely a matter of opinion. They do cause various issues with how they interact with browser navigation controls and do not exist in HTML 5.
When I embed a piece of html code, it seems that it won't be effected by the linked css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>worldmapper BETA</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<embed type="text/html" src="test.html">
</body>
</html>
Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).
You are loading a separate document in a sub-window.
For the CSS to apply, you need to link the CSS to that document.
Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.