add an event listener to an element with javascript [duplicate]

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: stackoverflow.com/questions/6452502/… — Asons
– Asons, Commented Jan 5, 2019 at 13:19
I did change it around before I saw your comment to this: ifrm.setAttribute("id", "ifrm"); document.body.appendChild(ifrm); — Sparlarva
– Sparlarva, Commented Jan 5, 2019 at 13:21
Then update your code sample to avoid further comments about that. — Asons
– Asons, Commented Jan 5, 2019 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
– Sparlarva, Commented Jan 5, 2019 at 13:22
An iframe doesn't catch an on click event as other html elements does...read my above link — Asons
– Asons, Commented Jan 5, 2019 at 13:23

Carlos Jafet Neto · Accepted Answer · 2019-01-05 13:22:45Z

-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 5, 2019 at 13:22

Carlos Jafet Neto

9227 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Asons Over a year ago

The question ask about adding event listener, not set an id.

Carlos Jafet Neto Over a year ago

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.

Asons Over a year ago

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.

Carlos Jafet Neto Over a year ago

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.

Josh · Accepted Answer · 2019-01-05 13:43:12Z

-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 5, 2019 at 13:43

answered Jan 5, 2019 at 13:31

Josh

7075 silver badges15 bronze badges

Collectives™ on Stack Overflow

add an event listener to an element with javascript [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related