how to show html content inside html page - html

i know i can have iframe in a html page, say parent.htm, and i can have something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<img alt="http://localhost/images/header.png" src="http://localhost/images/header.png" width=700px height=100px />
<iframe src="Child.htm"></iframe>
</body>
</html>
But can i put html directly into iframe rather than pointing it to a file (child.htm).
Thanks.

No you cant only browsers that do not support frames will show the contents
The information to be inserted inline is designated by the src
attribute of this element. The contents of the IFRAME element, on the
other hand, should only be displayed by user agents that do not
support frames or are configured not to display frames.
From W3C

Use a div, create html into it. Then set a size to the div and use overflow:auto to create scrollbar (like an iframe)

Related

Can I put an entire HTML document in a template?

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>

Side effects having an html page with just an img tag?

If I just have an <img> as an html page, could there be any security risks? In other words, no <html><head>or<body> tags.
So let's say it is my default.htm page.
The html, head and body elements are always going to be there. You can't actually have an HTML page without them, even if you leave out the tags.
The following two valid HTML documents are equivalent (whitespace notwithstanding):
<!DOCTYPE html>
<title>Image</title>
<img src="lightbulb.jpg" alt="">
<!DOCTYPE html>
<html>
<head><title>Image</title></head>
<body><img src="lightbulb.jpg" alt=""></body>
</html>
So even if there were any such security risks associated with leaving those elements out (which there aren't), the fact that they will always be there renders that concern moot.

How to inherit URL fragment from parent inside an `iframe`

I have a webpage with a "html reference manual", where I sent anchored URL links, e.g. like this:
http://www.vanillaware.de/plotFields/docs/html/plotFieldsDoc.html#prp/x
This opens automatically the page in the browser jumping to the referred anchor. This is the behavior I expect.
Now I want to embed this HTML page within another page using <iframe>, but still being able to send an URL link with an anchor. Unfortunately this doesn't work with this simple code:
<!DOCTYPE html>
<html>
<body>
<p><iframe src="plotFieldsDoc.html"></iframe></p>
</body>
</html>
Using a similar URL link as above:
http://www.vanillaware.de/plotFields/docs/html/tryUrlAnchor2.html#prp/x
Did I made something wrong and is there a simple way to reach my goal?
Use an inline onload event handler to reassign location.hash inside the iframe to match that of its parent page:
<!DOCTYPE html>
<html>
<body>
<p><iframe src="plotFieldsDoc.html" onload="this.contentDocument.location.hash=location.hash"></iframe></p>
</body>
</html>

html doesn't show in browser

I need to figure out what makes the html code in this page doesn't show in browser.
http://arbsq.net/dev/out_html.htm
I checked with:
http://validator.w3.org/check?uri=http%3A%2F%2Farbsq.net%2Fdev%2Fout_html.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
But it is not clear to me what causes the browser not to process the html code
Remove the <title/> tag. The browser is interpreting your entire html code as the title of the page.
Remove <title/> or change to <title>Site title</title> otherwise the hole site is interpreted as your title.
You need to move the contents of your <title></title> tag to the <body></body> tag. If you just remove the <title></title> tag like others have suggested, it will still not show because tags in the <head></head> tag are invisible to the end user. The <head></head> tag contains scripts and links to external resources as well as information about the page for the browser. The <body></body> tag should contain all of your HTML markup for the page.

How to force certain elements to only show when fully loaded on a webpage?

Lets take a static html page as a scenario, lets say you have a DIV element that you wish to only render fully within a users browser AFTER all its content has already been fully loaded instead of having bits and pieces of it appear. Any ideas appreciated! thanks
Hide the DIVs and show them with JavaScript when onload fires. E.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function showHidden() {
document.getElementById("cantseeme").style.display='block'; // Show it
}
</script>
</head>
<body onload="showHidden();">
<div id="cantseeme" style="display:none;">Hidden element</div>
</body>
</html>
I would use jQuery, the DIV would have a style of display:none, and my body onLoad function would set the display to block.
trigger your code after the dom ready event. Link here for more details.