Two <iframe> in same html file isn't working properly - html

I tried to add two local html file (as frame, inside one html code) in two different iframe, but its not working. Output showing the same html file in both frame.[I guess, screenshot will help to understand my problem]
Here my html code.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Frame1:</h1>
<iframe src="frame1.html" frameborder="1" width="100%" height="250px" name="frame1">
</iframe>
<br /><br /><br />
<h2>Frame 2:</h2>
<iframe src="frame2.html" frameborder="1" width="100%" height="250px" name="frame2">
</iframe>
</body>
</html>
frame1.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>This is a separate frame than others</h2>
</body>
</html>
frame2.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Frame 3:</h3>
<iframe src="" frameborder="1" width="90%" height="180px">
</iframe>
</body>
</html>
Screenshot, describing my problem

I just try copy pasting your code in 3 different file in same folder, and i got what you need to have
Maybe this is a cache problem. Have you try to clear your cache browser?

Related

Hide "!DOCTYPE html" in iframe

We managed to embed a html-table with iframe. At the very top of the table you can read "!DOCTYTE html". What do I have to include in the iframe-command that this "!DOCTYTE html" doesn't show up anymore?
My code so far:
<iframe src="http://test/positiveFaelle.html" scrolling="no" seamless="seamless" frameBorder="0" width="900" height="485"></iframe>
The result:
It's a problem with your test/positiveFaelle.html file.
The content should look something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If in your file you have <!DOCTYPE html> it wont work.
Hope this helped.

Printing TEXt in IFRAM in html

How to print text in IFRAME in html? my code is here
<!DOCTYPE html>
<html>
<body>
<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a">
Hello How are you and show me now
</iframe>
<p></p>
</body>
</html>
the above text is not shown in IFRAMe how can i add that
you can do that make a html file and put some text in that file let consider in our case your file name is htmlframe.html and embed that file with iframe like
<iframe height="300px" width="100%" src="htmlframe.html" name="iframe_a"></iframe>
A simple text can not be added on an iframe as the content of the iframe will be overridden by the src specified. So try this trick .
<!DOCTYPE html>
<html>
<body>
<iframe height="300px" width="100%" src="https://www.youtube.com/embed/VkzVgiYUEIM" name="iframe_a">
</iframe>
<span style="position:absolute;z-index:99;font-size:50px;color:RED;margin-top:-200px;">YOUR LABEL HERE</span>
</body>
</html>

html <object> being clipped although height=100%

I am using the following code to embed a pdf in a webpage:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>
However the embedded document will be clipped as the height will be set to a value that wil clip the object. Forcing size in pixels will fix the problem. How is that?
Make you tests here as jsfiddle will fail to deal with <object>
The page itself needs a size assigned to it.
set the style appropriately for your page.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{height: 100%;width: 100%}
</style>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>

content at after youtube iframe not shown

I want to show youtube video in html. For that i am using iframe. But the content at after iframe is not showing.
this is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<p>Content of the document......</p>
<h3>1 Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language</h3><div><p><span class="embed-youtube"><iframe class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/videoseries?list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7&hl=en_US" frameborder="0" allowfullscreen="true"/></span></p></div>
<p>END END</p>
</body>
</html>
In this code "END END" not showing at after the youtube iframe
You need to close the iframe tag properly. Currently you close it
inline, but this is not the correct way. Do:
<iframe ..></iframe>

Why elements are removed after iframe

I have just noticed my element is not rendered in the browser after an iframe element.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="xpto">
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%"/>
</div>
<div class="footer">
something
</div>
</body>
</html>
jsfiddle
Does anyone knows why?
Is I remove the iframe everything works fine!
Use </iframe> instead of ending the element tag within itself which is <tag />
<div class="xpto">
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%"></iframe>
</div>
<div class="footer">
something
</div>
If you close the <iframe> tag it will show the footer
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%">
</iframe>
You should close iframe by tag.
Here is working fiddle ,
FIDDLE
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%"></iframe>