Question about text after iframe - html

I have this test html page, I tried it in both chrome and firefox.
<html>
<body>
before iframe
<iframe width="300" height="300" src="http://www.yahoo.com"/>
after iframe
</body>
</html>
But what i see is I see the text 'before iframe', but I don't see the text 'after iframe'.
Can you please tell how can I fix it?
Thank you.

An iframe is not a self closing element, specify the end tag.
<iframe src="" width="" height=""></iframe>

Iframes can't be self-closing, they need a closing tag. One of the oddities of HTML.
In other words, do this: <iframe src="blah"></iframe>, not this: <iframe src="blah" />
Same goes for script and textarea tags and probably others I'm forgetting at the moment.

Related

How to do table like format without tables

I'm trying to set up a website to display a twitch channel. For this, I embedded the channel, and the chat. I also put the logo. However, because the chat reaches down farther than the player, the logo can't go directly below the player. I know you could allow the logo to go below with tables, but those are a big headache, so I was wondering if there was another way to put the logo directly below the player. Website: https://katamonia--449243.repl.co/
<!DOCTYPE html>
<html>
<head>
<title>Katamonia</title>
</head>
<body style="background-color:#333">
<center>
<iframe align="top" src="https://player.twitch.tv/?channel=katamonia" frameborder="0" allowfullscreen="true" scrolling="no" height="582" width=74%>
<iframe frameborder="2"
scrolling="no"
src="https://www.twitch.tv/embed/katamonia/chat"
height="100"
width="100">
</iframe>
<iframe src="https://www.twitch.tv/embed/katamonia/chat?darkpopout" frameborder="0" scrolling="yes" height="758" width=24%></iframe>
</center>
</br>
<img align="top" src="https://static-cdn.jtvnw.net/emoticons/v1/778094/2.0" height="200" width="200">
</body>
</html>
So you forgot to close the first <iframe> tag with </iframe>. Then you can wrap different contents with <div></div> containers to create a clear structure and add proper alignment. I made a fiddle for you that shows you how you could do it:
https://jsfiddle.net/NicolasDurant/xp9wf8t6/
It also would be great, if you can extract your stylings out of your HTML file into a seperate CSS file, so you have all the stylings in one place.
There are alot of possibilities to align containers. I used flexbox. Here is a complete guide about that: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One of the most used libraries for arrangement and default components is bootstrap, you should give it a try:
https://getbootstrap.com/

Web page not displayed when using <Iframe> tag in HTML

The web page is not displayed when the following was inserted in the html. Neither was this working for any other link. Please tell me what is the problem in this?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="https://www.w3schools.com" style="height:500px;width:900px"></iframe>
</body>
</html>
Per the console:
Refused to display 'https://www.w3schools.com/' in a frame because it
set 'X-Frame-Options' to 'sameorigin'.
This means that W3 Schools will not allow you to display its pages in an external iframe.
No need to have the style attribute.
<iframe height="500px" width="800px" src="https://www.google.com" ></iframe>
That should fix it.

How to use the nested iframe in html?

I am trying like this.But frame1 is visible. I can't show the frame2. The code is below,
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="1000" height="1000" id="frame1" name="frame1">
<iframe width="200" height="200" src="http://www.bing.com" id="frame2" name="frame2">
</iframe></iframe></body></html>
Can any one please help me.
The child elements of an iframe are alternative content for use if frames are disabled or not supported.
Either make the child frame a sibling or move it to the document you load into the outside frame.
If you want an iframe inside of and iframe you should do the following:
The link to access this page should have ?interframe=true at the end of it.
e.g. http://www.example.com/test.html?interframe=true
You shouldn't add ?interframe=true to the ends of http://www.w3schools.com and http://www.bing.com though.
To make it clear:
Let's say your homepage is http://www.example.com And the page that you need help with is http://www.example.com/test
The <a> tag in http://www.example.com that brings you to http://www.example.com/test.html should be example text
I hope this helps.
You can stack it up. But for nesting, you need to edit it.
Main page has iframe code pointing to page1. Page 1 has iframe code pointing to page2.
Don't nest them in one page. If you can't edit page 1 then stack them up.
MainPage.html
<DOCTYPE html><html><body>
<iframe src="page1.html" width="1000" height="1000" id="frame1" name="frame1"></iframe>
</body></html>
Page1.html
<!DOCTYPE html><html><body>
<iframe width="200" height="200" src="page2.html" id="frame2" name="frame2"></iframe>
</body></html>
For stacking, see #Andri answer.
try change your markup into the following :
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="1000" height="1000" id="frame1" name="frame1">
</iframe>
<iframe width="200" height="200" src="http://www.bing.com" id="frame2" name="frame2">
</iframe>
</body>
</html>

How does Facebook prevent you from putting the site into an iFrame?

The following code doesn't work. How does Facebook do this? Is there any way around it?
<html>
<head></head>
<body>
<iframe src="http://www.facebook.com" width="500" height="500">
</iframe>
</body>
</html>
This is because they have <meta http-equiv="X-Frame-Options" content="deny" /> in their source.
They do this to avoid scams and click jacking. This is impossible to do. It's a security feature that wont be going anywhere...

line after IFRAME is not visible

line after IFRAME is not visible in both IE and FF. refer the below code and let me know whether I am doing anything wrong.
<html>
<body>
line before iframe <br />
<iframe src="about:blank" />
<br /> line after iframe
</body>
</html>
you need to close the iframe tag. otherwise the content that comes after it is considered "things to show" when iframe is not supported.
(by the way, i think if you use XHTML to write the <iframe ... /> then IE will take it as HTML instead. IE doesn't understand XHTML as XHTML. It understands it as HTML.)
create the iframe with a separate close tag:
<html>
<body>
line before iframe <br />
<iframe src="about:blank"></iframe>
<br /> line after iframe
</body>
</html>
There are some tags (iframe and textarea come to mind) which don't like it when you use their compact form.
I was integrating Facebook Connect in my webpage via iFrame tag, like this:
<iframe src="..." style="..."></iframe>
It worked in all browsers except IE8.
Now I found out, that YOU HAVE to provide a text as content of the tags. Then it works perfectly!
Example:
<iframe src="..." style="...">Your browser does not support iFrames</iframe>
or what I am using now is the following (display just a space):
Solution:
<iframe src="..." style="..."> </iframe>