I am currently making a website for school and I'm quite inexperienced.
The problem I've encountered is:
I have an iframe on a homepage, which I want to make longer depending on the link clicked.
That part is easy, what is not however is making the iframe longer when clicking on a link within the iframe.
So I have an external script in which I do
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
var frame, div1;
function mainInit(){
frame = new getObj("idFrame");
}
function init2(){
div1 = new getObj("divWithTable");
div1.style.visibility = "hidden";
}
function ShowDiv(){
div1.style.visibility = "visible";
//frame.obj.height = 1000;
}
So I have a <body onload="mainInit()"> on my homepage and a <body onload="init2()"> on the page within the iframe, which also has a button with an onclick="ShowDiv()".
What the problem is now is:
I can not change the length of the iframe when I click a button that shows a div on the page within it. I would need to somehow return the defined iframe from the first page, so I can use it on the second.
Provided you are on the same origin, you should be able to access the links and attach a function to them. :)
// Find the iframe (in this case by it's tag <iframe>)
var iframe = document.getElementsByTagName('iframe')[0];
// Get the content of the iframe
// The || means or, this is to account for the way different browser allow access to iframe content
// If you cant get the contentDocument, then it'll give you the contentWindow.document
var iframeContent = iframe.contentDocument || iframe.contentWindow.document;
// Finally we get the link elements from the iframe
// In this example all of our links have the class 'my-link', but you could get by tag name <a> (in the same way we got the iframe)
var iframeLinks = iframeContent.getElementsByClassName('my-link');
// Then add your listeners to the links
If you are running this locally you will need a virtual server. There are lots out there that are really easy to run. :)
Unfortunately it's not possible to intercept clicks within an iframe unless the iframe's location is the same domain as the containing document.
Here's a JQuery solution if you will be using the same domain: Add click event to iframe
You could however check the location of the iframe when it changes and run code to change the iframe size.
The most supported way to do so is by putting an onload attribute on the iframe.
<iframe onLoad="runSomeCode()"></iframe>
Another way:
document.getElementsByTagName('iframe')[0].onload = function() {
// Do some stuff
}
Several iframe onload examples here: iFrame src change event detection?
