How to open iframe in another iframe from different/external html file - javascript

I want to open an iframe in another iframe from the external file. For instance:
index.html file
<!doctype html>
<html>
<head>
<title>Iframe 1</title>
</head>
<body style="text-align: center; background-color: #F4D03F; color: #333;margin: 0; padding: 0;position: absolute;width: 100%;height: 100%;">
<h1>Iframe 1</h1>
<iframe id="iframe" style="border: 0; position: absolute; display: none; width: 100%; height: 100%; left: 0; top: 0"></iframe>
</body>
</html>
Second file called iframe2.html
<!doctype html>
<html>
<head>
<title>Iframe 2</title>
</head>
<body style="text-align: center; background-color: #F4D03F; color: #333;margin: 0; padding: 0;position: absolute;width: 100%;height: 100%;">
<h1>Iframe 2</h1>
<iframe id="iframe" style="border: 0; position: absolute; display: none; width: 100%; height: 100%; left: 0; top: 0"></iframe>
</body>
</html>
and I would like to open the same identical file but as an iframe 2, after the first one is loaded.
So it would be kind of the nested iframes but in separate html files.
Is it overall possible?

So you're meaning something like :
if2.addEventListener("click",()=>{
let if3 = document.createElement('iframe');
if3.id="if3";
if1.appendChild(if3);
});
iframe{height:250px;width:250px;border:1px solid black;}
#if3{height:50px;width:50px;}
<iframe id="if1"></iframe>
<iframe id="if2"></iframe>
also the word window in javascript is global so if it's called in a nested iframe you can get it back in the main document.
here is an exemple that shows window in action :
https://jsfiddle.net/josewirewax/2rqnsdd6/
and another one with lots of iframes
http://jsfiddle.net/asicfr/670uc0ve/

Related

How to position a div as a block at the bottom of the HTML5 video player?

I want to create my own UI for the HTML5 Video Player. But I cannot get the first step right. I want to position a div where the default HTML5 Video Player controls are. I don't know how to position the controls div there. Please Help Me.
My code:
#video_player {
width: 100%;
height: 50%;
}
#controls {
width: 100%;
height: 35px;
position: relative;
z-index: 100px;
background-color: #55b2ff;
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="video_player_box">
<video video-player id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" controls></video>
<div id="controls"></div>
</div>
</body>
</html>
The child should have position: absolute relative to the parent.
Ps: You should use classes for styling.
#video_player {
width: 100%;
height: 50%;
}
#controls {
width: 100%;
height: 10px;
position:absolute;
bottom: 0;
z-index: 100px;
background-color:#55b2ff;
}
.video_player_container {
position: relative;
}
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div class="video_player_container">
<video video-player id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" controls></video>
<div id="controls"></div>
</div>
</body>
</html>

Removing all images from a webpage in an iframe using CSS or JavaScript

I would like to remove all images that are to be displayed on an HTML file, which contains a refreshed iframe.
Is there possibly a method using CSS or JavaScript that would do so?
The page that loads the iframe uses the code below.
function reloadIFrame() {
console.log('reloading..');
document.getElementById('iframe').contentWindow.location.reload();
}
window.setInterval(reloadIFrame, 3000);
body {
margin: 0px;
}
h1 {
font-family: arial;
font-size: 50%;
}
iframe {
width: 100%;
height: 800px;
}
div.top {
background-color: rgba(2, 109, 8, 0.83);
height: 1%;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="news.png" type="image/x-icon" />
<title>Chat</title>
</head>
<body>
<div class="top">
<img src="news.png" alt="newsicons" height="31" width="31">
<h1>News</h1>
</div>
<iframe id="iframe" src="http://www.bbc.com/news/world"></iframe>
</body>
</html>
You can do this using javascript. Check updated snippet below..
if(document.getElementById('iframe')) {
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}
<div class="top">
<img src="news.png" alt="newsicons" height="31" width="31">
<h1>News</h1>
</div>
<iframe id="iframe" src="http://www.bbc.com/news/world"></iframe>

Javascript-Load URL from iFrame

I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't change its code

Javascript/ CSS webkit filter - remove blur on specific element

I'm trying to blur the background page and popup a loading box that is NOT blurred. I would think the blur(0px) would remove the blur on the loading div. However, the popup box also remains blurred.
How can I remove the blur for a specific element only?
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
<html>
<body id="blurme">
<h1>Welcome to My Website</h1>
<div id="loading">
Please wait
</div>
</body>
</html>
Here's the CSS the loading box
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
display:none;
}
This is an issue of inheritance. By moving the blurme id to another div, the loading div ceases to be a child of the blurme object: The first letter in CSS is for cascading.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
</body>
</html>
This should fix the problem.
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
</body>

How to make javascript custom upload file?

I have been working to create a totaly new upload control with custom UI. I have done the UI part but I cannot get the background job which is getting the full pathname of file to upload. Please help me do the real uploading part.
** TO BE HONEST, I FOUND THIS CODE ONLINE **
here is the link - http://jsfiddle.net/c3kyX/
and here is the code below
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
#doit, #hid {
position: absolute;
cursor: default;
}
#doit {
top: 0;
left: 0;
border: 1px solid #000;
}
#hid {
opacity: 0.001;
font-size: 300%;
top: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#hid {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<div id="container" title="Choose File">
<div id="doit">
<img src="upload.png" width="100" width="100" />
</div>
<input id="hid" type="file" size=1>
</div>
<script type="text/javascript">
doit.onclick = function(){hid.click();};
</script>
</body>
</html>
The problem is that you are not doing anything with the file. You need to post it somewhere to process it and the form needs to have the proper enctype. For example:
<form action="upload.php" ENCTYPE="multipart/form-data" method="post">
Obviously, you'll need to write the script that handles the actual file processing (and of course it needn't be a php file).

Categories