add an event listener to an element with javascript

Question

Through a script tag I've inserted on an external site, I am trying to load in some javascript which iframes a widget I am hosting on a webpage, I only want the small launcher icon iFramed initially and then when its opened, iFrame the entire chat window when it's expanded. As Iframing the whole thing takes up a lot of the external site and means everything behind is isnt reachable!

My thought was to have a small iframe initialy and then when it's clicked, increase it's size to the entire window and then while doing so, add an element in the area where the launcher is to then close it when pressed and reduce the iframe size again! hacky I know but i dont know how else I can do this?

What you can see is me creating an iframe, and trying to give it an id of 'ifrm' with the line: the code so far: ifrm.setAttribute("id", "ifrm"); . AND then try to change the iframes CSS or append a new one? BUT this doesnt call the function when clicked so i may have the setting of the ID / calling it wrong?

Then how would I append an element? sorry ive probably gone the wrong way about this.

prepareFrame();

function prepareFrame() {
    console.log("yes this consoles inside of prepareFrame")
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "https://5efae1b1.ngrok.io");
    ifrm.style.width = "100px";
    ifrm.style.height = "100px";
    ifrm.style.position="fixed";
    ifrm.style.right="0";
    ifrm.style.bottom="0";
    ifrm.style.border="0";
    ifrm.setAttribute("id", "ifrm"); 

    document.body.appendChild(ifrm);

    document.getElementById("ifrm").addEventListener("click", function(){click1(1);}, false);

    }

function click1() {
    alert("calling");   
    document.getElementById("ifrm").style.backgroundColor = '#ff0000';
    colorcheck = document.getElementById("ifrm").style.backgroundColor;
    console.log('colour check' + colorcheck);
  };

Thanks so much if you can help!

First off, no need to wait until appended to set its id, do that before and you avoid a second lookup, e.g. `ifrm.setAttribute("id", "ifrm")` or `ifrm.id = 'ifrm'`. Then, when it comes to click event on an iframe, check this post: https://stackoverflow.com/questions/6452502/adding-click-event-handler-to-iframe — Asons, Jan 05 '19 at 13:19
I did change it around before I saw your comment to this: ifrm.setAttribute("id", "ifrm"); document.body.appendChild(ifrm); — Sparlarva, Jan 05 '19 at 13:21
Then update your code sample to avoid further comments about that. — Asons, Jan 05 '19 at 13:22
And the function was still not called, i'm finding it extremely difficult to iFrame something small and then for the iFrame to be a larger size to fit the content thats increased in size! maybe theres something im missing — Sparlarva, Jan 05 '19 at 13:22
An iframe doesn't catch an on click event as other html elements does...read my above link — Asons, Jan 05 '19 at 13:23
And here is another that might be useful: https://stackoverflow.com/questions/9393532/cross-domain-iframe-issue — Asons, Jan 05 '19 at 13:38

score -1 · Answer 1 · answered Jan 05 '19 at 13:22

-1

Instead of doing this:

document.getElementsByTagName("iframe")[0].setAttribute("id", "ifrm");

Try this at the beginning of your iframe creation:

var ifrm = document.createElement("iframe");
ifrm.setAttribute('id', 'ifrm'); // assign an id

answered Jan 05 '19 at 13:22

Carlos Jafet Neto

871
7
11

The question ask about adding event listener, not set an id. – Asons Jan 05 '19 at 13:26
Sure but if your event listener is not working maybe it is because you did not set it right and as pointed you do not need to do all that to set an id to it. – Carlos Jafet Neto Jan 05 '19 at 14:10
If you check the OP's edit and their/mine comments, you'll see they already made that change, making this answer of no value. I recommend you delete it. – Asons Jan 05 '19 at 14:35
Yep, but it was not visible when i was answering. Just trying to help anyway. Maybe you think it was set but did not realize. – Carlos Jafet Neto Jan 05 '19 at 14:45

Josh · Answer 2 · 2019-01-05T13:43:12.990

-1

add ifrm.contentDocument.addEventListener("click", function(e){click1(e)}, false) to inside the prepareFrame function, this will then call the click1 function.

edited Jan 05 '19 at 13:43

answered Jan 05 '19 at 13:31

Josh

603
5
15

add an event listener to an element with javascript

2 Answers2