Lengthening an iframe from another page within the iframe itself

Question

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.

`document.all` and `document.layers`? Why are you bloating your code with support for IE 4 and Netscape 4? They are dead browsers. — Quentin, May 25 '14 at 19:20
It's a script my teacher provided and which I'm obligated to use.. It's stupid but yeah.. Don't have a choice — , May 25 '14 at 19:54

JakeSidSmith · Accepted Answer · 2014-05-25T19:19:45.463

1

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. :)

edited May 25 '14 at 19:19

answered May 25 '14 at 18:53

JakeSidSmith

819
6
12

As I said, I'm quite inexperienced at this and after the first line of code I don't understand anything. If this works though, wow. – May 25 '14 at 18:59
Added some comments to help you out. :) – JakeSidSmith May 25 '14 at 19:20
Thank you so much! I got it to work! This means the world to me, thank you! – May 25 '14 at 19:37
No problem. Hope all goes well. :) – JakeSidSmith May 25 '14 at 19:55

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

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?

edited May 23 '17 at 11:43

Community

1
1

answered May 25 '14 at 17:57

JakeSidSmith

819
6
12

I don't quite understand, what do you mean with same domain? The onload event wouldn't work since it does not get reloaded when you click the button – May 25 '14 at 18:03
As in, you couldn't access the iframe if it was set to be www.google.com. However, if it was www.yourdomain.com it'd be fine. What exactly do you plan on loading in the iframe? – JakeSidSmith May 25 '14 at 18:11
Once I click on a link within my navlist, a page with info is loaded within it. Within this page there is a button, which makes a div visible. To make this div fit the iframe needs to be higher =/ – May 25 '14 at 18:20
Where does the "page with info" come from? – JakeSidSmith May 25 '14 at 18:26
Imagine a folder with: Home.html, Infopage.html, Hometxt.html With hometxt being the iframe source. The script is in a Scripts/ folder – May 25 '14 at 18:41
Added a new answer. Give it a go. If you get errors because the origin is different (Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin...), then there's not much you can do sadly. :( – JakeSidSmith May 25 '14 at 18:54

Lengthening an iframe from another page within the iframe itself

2 Answers2

Linked