【Web前端问题】神奇的iframe现象：居然能够自动触发onclick 事件，这是什么原因？？

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
   <button id='chg'>change</button>
   <iframe id='frame' src=''></iframe>
   <script>
     function $id(id){
       return document.getElementById(id);
     }
     var btn=document.getElementById('chg');
     var tip=true;
     btn.onclick=function(){
        alert('你居然在按钮没有被按下的时候就触发了！！！');
     }
     (function(){
         var iList=document.getElementsByTagName('iframe');
         for (var i=0;i<iList.length;++i)
          {
             iList[i].onload=function(){
               this.style.height=this.contentWindow.document.documentElement.scrollHeight+'px';
             }
          } 
     }());
   </script>
 </body>
</html>

回答：

图片描述

兄弟这样看你看到了什么？

btn.onclick=function(){
        alert('你居然在按钮没有被按下的时候就触发了！！！');
     }(calegeca);
var calegeca = function() {
            var iList = document.getElementsByTagName('iframe');
            for (var i = 0; i < iList.length; ++i) {
                iList[i].onload = function() {
                    this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';
                }
            }
        }();

尽量使用“;”号哦；在闭包前加，效果更好哦；

;(function(){
    //calegeca
}())

回答：

iframe：这锅我不背。

回答：

[哭笑不得的表情]我觉的这题可以当做面试题来考了。看了好久。。。才懂[哭笑不得的表情]

回答：

JS 大部分时候可以省略分号，除了以 () 或 [] 等开头的五种情况的时候。

回答：

btn.onclick=function(){
    alert('你居然在按钮没有被按下的时候就触发了！！！');
 };

这里}后面缺个分号，你竟然想让iframe背锅

回答：

所以 js 分号还是加的好。。。

回答：

看了 评论 我才看明白 问题 。。。。。

回答：

我还以为有黑科技。。

回答：

onclick方法后面没加分号。。。恰好后面跟了个自执行函数。。。

回答：

  1. 函数声明不可以直接用（）调用，函数表达式可以直接用（）调用。

  2. “函数声明” 与 “函数表达式” 之间的区别就是 function 是不是那一行的句首的第一个单词。

  3. 函数声明 可以在声明所在的作用域中被调用， 函数表达式 只能在函数表达式中调用自己。

函数声明

function foo(){console.log(1)};
foo(); //=> 1

函数表达式

var a = function bar(){}();
!function baz(){}();
(function baa(){}());
(function draw(){
    requestAnimationFrame(draw);
})();
draw(); //=> ReferenceError: draw is not defined

参考1

回答：

好吧，我没看出来！

回答：

吓到我了……

回答：

;(function(){
})()

对比

;(function(){
}())

对比

;function(){
}()

回答：

同意楼上把这题作为面试题，在感受到js这门缺个分号就能把函数定义变成IIFE的语言的威力之后，新手再也不会忘记加分号了哈（不用分号的大神请无视）

回答：

请问我这是为什么呢

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<style>
  body {
    font-size: 12px;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.2rem;
  }
</style>
<body>
  <p>哈哈哈哈哈哈</p>
  <h1>hhhhhhhhh</h1>
  <h2>qqqqqqqqq</h2>
  <a href="#" id="size-12">12</a>
  <a href="#" id="size-14">14</a>
  <a href="#" id="size-16">16</a>
  <script>
    function changeSize(size) {
      console.log(size)
      return function(){
        console.log(99)
          document.body.style.fontSize = size + 'px';
      };
    };
    var size12 = changeSize(12);
    var size14 = changeSize(14);
    var size16 = changeSize(16);
    document.getElementById('size-12').onclick = changeSize(12);
    document.getElementById('size-14').onclick = changeSize(14);
    document.getElementById('size-16').onclick = size16;
    //我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上
  </script>
</body>
</html>

回答：

真是一个坑爹的问题 一不小心还不能看出来

以上是 【Web前端问题】神奇的iframe现象：居然能够自动触发onclick 事件，这是什么原因？？ 的全部内容， 来源链接： utcz.com/a/143223.html

回到顶部