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 have access to edit the code
Could you please help?
Thanks in advance.
You need to do it like this:
window.top.location.href = "http://www.google.com";
Related
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/
I have a iframe in php page.
<iframe align="middle" allow-top-navigation='yes' seamless='seamless' src="http://www.hikvisionindia.com/products/network-camera" scrolling="yes" align="middle" style="height: 1000px; border: 0px none; width: 900px; margin-top: -140px; margin-left: 50px;" name="myFrame">
</iframe>
I want to show src link in iframe. But its giving blank page. But when I change the src to src="http://www.hikvisionindia.com/products/network-camera" then its showing page.
What is wrong? Please help.
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
I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.
You must add a container/wrapper around the iframe. Try this:
CSS
.wrapper{
position:relative;
z-index: 1;
display: inline-block;
}
.hidelogo{
position: absolute;
width: 150px;
height: 40px;
background: #222;
right: 0px;
bottom: 6px;
z-index:999;
display: block;
color: #fff;
}
HTML
<div class="wrapper">
<div class="hidelogo"></div>
<iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>
DEMO HERE
Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this div
CSS
#Blocker{
position:absolute;
z-index:10;
right:10px;
bottom:5px;
height:15px;
width:100px;
background-color:orange;
}
#frame{
height:100%;
width:100%;
position:absolute;
}
#Wrapper{
height:100%;
width:auto;
border:solid red 2px;
}
HTML
<div id="Wrapper">
<iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
<div id="Blocker">
Logo Blocked
</div>
</div>
100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">
I'm using iframe tags in my index.html. Below is the code
<iframe src="header.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 0px;"></iframe>
<iframe src="menu.html" height="500px" scrolling="no" width="250px"
style="position: absolute; top: 103px;"></iframe>
<iframe src="body.html" height="500px" scrolling="no" width="1083px"
style="position: absolute; top: 103px; left: 260px"></iframe>
<iframe src="footer.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 605px;"></iframe>
My Login div is in menu.html and logout is in footer.html. I want to show logout when login div is hidden(after login) and when i click Logout i want my logout link to be hidden and login div to be displayed. Since both of them are in differnet html's so i want to know how we can do this simultaneaously. Right now this functionality is working but i need to refresh the page.
Also window.location.reload is not useful.
Is there any easier way to perform hide/show operations in multiple html's concurrently.
If you really must keep this content in separate files and are intent on making separate calls for each, try this:
<div id="header" style="height: 100px; width 1335px; overflow: hidden; position: absolute; top: 0px;"></div>
<div id="menu" style="height: 500px; width 250px; overflow: hidden; position: absolute; top: 103px;"></div>
<div id="body" style="height: 500px; width: 1083; overflow: hidden; position: absolute; top: 103px; left: 260px;"></div>
<div id="footer" style="height: 100px; weight:1335px; overflow: hidden; position: absolute; top: 605px;"></div>
And some jQuery like so:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#menu").load("menu.html");
$("#body").load("body.html");
$("#footer").load("footer.html");
});
</script>
Now that you have all your markup in the same window, use jQuery to do whatever you want with it.