Hyperlinking an iFrame? - javascript

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.

Related

How to detect when iframe starts loading another page?

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>

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

Trying to select elements across iframes

I want to select all DIVs in my page, including its child iframe.
I have two DIVs here but whenever i try and select them it only grabs the outer one.
<html>
<head></head>
<body>
<div class='xx'>blah</div>
<iframe id='x'>
<html>
<head></head>
<body>
<div class='xx'>blah2</div>
</body>
</html>
</iframe>
</body>
</html>
Is there any way for me to get both DIVs back?
var a = $('.xx');
alert(a.length); //only gives me 1 :(
My fiddle is here :
http://jsfiddle.net/7kvFw/
With only one call this is not possible at all. The iframe is another document so it is not accessable directly. You need to search in all frames seperatly.
By the way your example is not valid. A iframe is just a referece to another document you cannot put the content in the same html document. If you just care about a "box" with the option to scroll inside, just add the another div with the ablity to scroll. This would also allow you to get all .xx elements at once.
See also this fiddle.

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();
});
});

How do I prevent an Iframe from re-loading when adding it to the document?

We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document.
The following markup demonstrates the problem while taking simplemodal out of the equation. I only mention simplemodal in this post for context as to why the iframe is removed and re-added.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
I think that it is not possible if you use remove().
But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other.
Have you tried detach()?. In the jQuery documentation says:
To remove the elements without removing data and events, use .detach() instead.
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes.
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute;. Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width).
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload.
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with #Ryuu's answer, don't bother with iframes at all is the best option.

Categories