How to detect when iframe starts loading another page? - javascript

I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html.js #iframeID
{
display: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID').on('load', function()
{
$('#iframeID').contents().find('a').on('click', function()
{
$('html').addClass('js');
console.log('click');
});
console.log('loaded');
$('#iframeID').contents().find('#mySidenav').remove();
$('html').removeClass('js');
});
});
</script>
</head>
<body>
<iframe id="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.

You can make use of load event on the iframe as such,
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe's load event is also called every time it's src changes.

$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution:
Custom attribute for iframe:
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page:
window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
$(document.body).on("click","a", function() {
window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
});
And listen; is started attribute changed to 1 on parent page?

I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.js
{
display: none;
}
iframe.unclickable
{
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('js');
$('#iframeID2').removeClass('js');
});
$('#iframeID1').contents().find('#mySidenav').remove();
$('#iframeID1').removeClass('js');
$('#iframeID2').addClass('js');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>
</script>
</body>
</html>

Related

Hide header of Sharepoint custom list displayed in iframe

I have a custom list from a different sharepoint site (still the same domain) that I would like to display on my work site without the header (at a minimum, but getting rid of the ribbon would be nice too). I have attempted 4 methods without success listed below:
1) I can't even get it to work on a normal page by adding ?isdlg=1 to the end of my url (ie ..allitems.aspx?isdlg=1)
2) since I mostly work with SQL and not HTML I am sure I may have screwed up some of my tags.
<div class="ms-dlgFrameContainer">
<iframe width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="myurl.aspx">
<html class="ms-dialog">
<head>
<style type="text/css">
.ms-dialog #titleAreaBox { display:none }
</style>`
3) to hide the header of the page inside the iframe.
<script type="text/javascript">
document.getElementById("myiframe1").contentWindow.document.getElementById("titlerow").style.display = "none"; </script>`
4) Most promising. When I add
<iframe id="myiframe1" src="myurl" width="1000" height="450" frameborder="1"></iframe>
<style>
#titleAreaBox { display: none }
</style>
in the same CEWP as my iframe, it removes the title area for current page and not the page in the iframe. This exactly what I want except I want it to do that for the page inside the iframe.
5) I did this as well even just trying to change header color but didn't notice any change. I looked up the correct webpart ID.
<style type="text/css">
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader
{ background-color: pink; }
</style>
You could try below jQuery script, I just hide suiteBarTop in demo.
<iframe id="myiframe" width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="/sites/tst/SitePages/Home.aspx"></iframe>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$('#myiframe').load(function () {
$(this).contents().find('#suiteBarTop').hide();
});
})
</script>

Change an iframe's src from another html file?

Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source

load href to iframe but targetting it in parent window

I have these codes:
<html>
<head>
<title>Iframe</title>
</head>
<body>
SomePage<br/>
AnotherPage<br/>
<iframe src="" name="content" height="40%" width="100%"></iframe>
</body>
</html>
as you can see I have two links and one iframe,What i need is when I click SomePage.html link, I want the parent window reloads and then the SomePage.html will be loaded in the iframe, is this possible?, Thanks!
EDITED:
I have an Auto-Resizing iframe that only grows on heights and cannot shrink to smaller heights (well that's my problem here, All I want to achieve is the MasterPage like behavior in asp.net.
This is possible, you can use localStorage it's not cross fully browser. Quick Example.
$(document).ready(function(){
if(localStorage.frameURL) {
$("iframe[name=content]").attr('src', localStorage.frameURL);
}
$("[target=content]").click(function() {
localStorage.frameURL = $(this).attr('href');
window.location.reload();
});
});

Replace the content of _top window with content of iframe without reload page

Is it possible to replace the content of the browser window (_top frame) with the document loaded in an iframe, without issuing a new GET to load that document?
Something like this:
<html>
<head>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("#link").click(function() {
// should present in the browser window the content of the iframe WITHOUT reload
// even preserve javascript/head code
$(document).html($("#frameDestination").html());
});
});
</script>
</head>
<body>
<a id="link" href="#">full window</a>
<iframe id="frameDestination" src="http://www.some-random-site.com" width="900px" height="500px"></iframe>
</body>
</html>
Use contents() when working with an iframe in jQuery.
$("#YourIframe").contents().find("html").html();
This is only going to work if the iframe is in the same domain as the parent.
I haven't tested cross domain, but on the same domain I have this script working:
$(document).ready(function() {
$("#link").click(function() {
var iframeBody = document.getElementById("frameDestination").contentDocument,
head = iframeBody['head'].innerHTML,
body = iframeBody['body'].innerHTML;
$('body').html( body );
$('head').html( head );
});
});
In the latest Firefox, I'm even able to set a variable in a script tag in the frame, and see that value in _top after clicking the link.

Hyperlinking an iFrame?

I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.

Categories