使用javascript

Question

通过我在外部网站上插入的脚本标签，我试图加载一些JavaScript，以对我托管在网页上的小部件进行框架化， 我只希望最初使用小启动器图标iFrame，然后将其打开时，将iFrame扩展为整个聊天窗口。就像Iframing一样，整个事情占用了很多外部站点，这意味着后面的一切都无法访问！

我的想法是先创建一个较小的iframe，然后单击它，然后将其增大到整个窗口的大小，然后在此过程中，在启动器所在的区域中添加一个元素，然后在按下时将其关闭并减小iframe大小再次！ hacky，我知道，但是我不知道该怎么办？

您可以看到的是我创建了一个iframe，并尝试为其指定ID 的“ ifrm”行： 到目前为止的代码：ifrm.setAttribute（“ id”，“ ifrm”）;  。然后尝试更改iframe CSS或添加一个新的CSS？但是这不会在单击时调用该函数，所以我可能 ID的设置/输入错误吗？

那我该如何追加一个元素？对不起，香港专业教育学院对此可能走错了路。

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);
  };

非常感谢您的帮助！

Answer 1

代替这样做：

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

在创建iframe的开始时尝试以下操作：

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

Answer 2

将ifrm.contentDocument.addEventListener("click", function(e){click1(e)}, false)添加到prepareFrame函数内部，然后将调用click1函数。