Automatic height chat iframe

Question

I’m developing a chat in php, it’s working perfectly, however, I’m having trouble putting the iframe for the main site where the client will have access, in the code it opens the iframe, but if I set a height (height) fixed or 100% for example, i cannot click on links or images that are below this iframe.

The code is this:

 <iframe id="iframe1" style="z-index:999999; background:none; right:0; width:400px; bottom:0; margin: 0;  position:fixed; padding: 0;" height=""  border="0" scrolling="no"  frameborder='0' src='link'></iframe> 

ex. it uses about 60px without the click, but when clicked it opens about 500px, how can I make it open a height proportional to closed or open?

Answer 1

I don’t know if this is what you ask for, but I did it to be height: 60px; normal and after clicked stay height: 500px;

First I created an iframe: http://fiddle.jshell.net/peLr1adu/2/ and within it I created a button (and a script just to let us know that it was actually clicked).

<button id="click">Clique aqui!</button>

document.getElementById("click").onclick = function(){
    document.body.innerHTML = "Clicado!";
};

Then I used this iframe: http://fiddle.jshell.net/veba7wjg/4/ and a script for when the button is clicked, make the iframe bigger

<iframe id="chat" name="chat" sandbox="allow-scripts allow-same-origin" frameborder="0" src="//fiddle.jshell.net/peLr1adu/2/show/light"></iframe>

#chat {
  height: 60px;
  border: 1px solid black;
}
#chat.big {
  height: 500px;
}

window.frames["chat"].document.getElementById("click").onclick = function(){
  document.getElementById("chat").className = "big";
};

Sandbox attributes in iframe are not accurate if the chat is in the same domain as the site.