Javascript-Load URL from iFrame - javascript

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

Related

How to check if dynamic element is visible inside of the iframe?

I am loading an iFrame on a page :
<div style="width: 800px; height: 500px; overflow: hidden">
<iframe src="https://mypage.com" width="900px" style="position: relative; left: -6%; top: -8%"></iframe>
when the iframe loads it contains :
<div id="overlap-root" style="position: absolute; z-index: 150; top: 0px; left: 0px;"></div>
But there wont be anything inside of this div , but depending on the user interaction a popup dialogue can appear and this div can load some classes like:
<div data-id="SSSearch" style="position: relative; z-index: 35;">
<div class="_dialog-nonmodal ui-draggable" style="width: 750px; z-index: 110; left: -46px; top: 49px;">
<div class="_dialog-error">
Q: Is there any way to detect the load of those classes ? i am trying to change the height of the iframe when the popup dialogue appears, and revert back to normal size when the popup disappears.

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

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/

Adding Image to the background youtube video on iframe tag

After applying this code I am getting video over Image but I want to add Image over you-tube with play button on it
In this code when I increase the padding of the div which is (padding: 18px) now video get shorter and background Image comes on back
but I want Video should play on clicking Image , video should play on the full container
<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allowfullscreen>
</iframe>
</div>
Please Try This:-
<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<a class="play-btn" href="#">Play Button</a>
</div>
Js
jQuery('.play-btn').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery('#background-video').find('iframe').show();
jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
});
CSS
#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }
Videojs should solve your problem in the easiest way possible :)
Take a look! https://docs.videojs.com/posterimage

How can I load URL content in main window

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";

Change the div content of an html from another html through jquery

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.

Categories