JavaScript设置display属性后div仍未显示的问题排查与解决

之前因拼写错误发布过类似问题，现已删除并修正代码。当前遇到的问题：点击列表条目后，明明把embedDiv的display设为block，但这个div还是没显示出来，而且关联的YouTube播放器也加载失败。用Chrome调试器确认代码已经跑完，embedElement.style.display确实是block，但内容就是看不到。

简化代码示例 #

HTML代码

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Livestreams</title>
  <style>
  </style>
</head>
<script src="dbg.js">
</script>
</head>

<body>
  <div id='fullPageDiv' style='width: 100%; overflow:hidden;'>
    <div id='livestreamTable' style='width: 60%;float:left;'>
      <table border='1'>
        <thead>
          <tr>
            <th>Started</th>
            <th>Channel</th>
            <th>Songs noted</th>
            <th style='text-align:right;'>Duration</th>
            <th style='text-align:right;'>Dimensions</th>
            <th>Livestream Title</th>
          </tr>
        </thead>
        <tbody>
          <tr id='livestream_row_0'>
            <td>2021-12-04 07:15:08</td>
            <td style='text-align:left;'>Primary</td>
            <td style='text-align:right;'></td>
            <td style='text-align:right;'>1:04:54</td>
            <td style='text-align:right;' id='videoDimensions0'>1280x720*</td>
            <td><span onclick='selectVidId("f5JVDUI81nk", 0, "livestream_row_0", "1280", "720");'>Click-this-element</span></td>
          </tr>
        </tbody>
      </table>
    </div><!-- Livestream table -->
    <div id='videoDiv' style='display: none;'>
      <video id='idVideo' width="320" height="240" controls>
                <!-- <source src='replaceme.mp4' type='video/mp4'> -->
                Need top insert some video content here.
        </video>
    </div><!--videoDiv-->
    <div id='embedDiv' style='display: none;'>
      <p>Why, hello there!</p>
    </div><!-- embedDiv-->
  </div><!-- This is the "page" division (the whole page after the form) -->

</html>

JavaScript代码

function selectVidId(youtubeId, tableRowNbr, tableRowId, videoWidth, videoHeight) {
  const embedElement = document.getElementById('embedDiv');
  const videoElement = document.getElementById('videoDiv');

  let response = "<div id='muteYouTubeVideoPlayer'></div> \
    <script> \
      function onYouTubeIframeAPIReady() \
        {
        var player = new YT.Player('muteYouTubeVideoPlayer', \
            { videoId : 'f5JVDUI81nk' // YouTube Video ID    \
            , width   : 480          // Player width (in px) \
            , height  : 360         // Player height (in px) \
            , playerVars: \
              { autoplay       : 0  // Auto-play the video on load       \
              , controls       : 1  // Show pause/play buttons in player \
              , showinfo       : 1  // Show the video title              \
              , modestbranding : 1  // Hide the Youtube Logo             \
              , loop           : 0  // Don't run the video in a loop     \
              , fs             : 0  // Don't hide the full screen button \
              , cc_load_policy : 0  // Hide closed captions              \
              , iv_load_policy : 3  // Hide the Video Annotations        \
              , autohide       : 0  // Hide video controls when playing  \
              } // playerVars \
            , events: {} // events \
            } \
          ) ; // new .Player \
        } // function \
      // Written by @labnol \
    </script>";

  videoElement.style.display = 'none';
  embedElement.innerHTML = response;
  embedElement.style.display = 'block';
}

核心原因 #

1. innerHTML插入的script不会自动执行：浏览器对通过innerHTML插入的<script>标签有安全限制，不会主动执行里面的代码，所以你写的onYouTubeIframeAPIReady函数根本没被触发，播放器自然生成不了。
2. 布局导致视觉上“未显示”：左侧的livestreamTable设置了float:left，而embedDiv没有设置浮动或宽度，即使设为block，它也会被挤到表格的下方，你滚动页面就能看到原来的测试文本"Why, hello there!"，只是不在你预期的右上方位置。

解决办法 #

1. 正确加载YouTube播放器

不要用innerHTML塞script，直接在页面头部引入YouTube IFrame API，然后动态创建播放器：

<!-- 在<head>标签里添加这行 -->
<script src="https://www.youtube.com/iframe_api"></script>

然后修改JS函数：

function selectVidId(youtubeId, tableRowNbr, tableRowId, videoWidth, videoHeight) {
  const embedElement = document.getElementById('embedDiv');
  const videoElement = document.getElementById('videoDiv');

  // 先清空embedDiv的内容
  embedElement.innerHTML = '<div id="muteYouTubeVideoPlayer"></div>';
  
  // 显示embedDiv并设置布局，让它在右侧
  embedElement.style.display = 'block';
  embedElement.style.float = 'left';
  embedElement.style.width = '40%';

  videoElement.style.display = 'none';

  // 直接创建YouTube播放器
  new YT.Player('muteYouTubeVideoPlayer', {
    videoId: youtubeId,
    width: videoWidth || 480,
    height: videoHeight || 360,
    playerVars: {
      autoplay: 0,
      controls: 1,
      showinfo: 1,
      modestbranding: 1,
      loop: 0,
      fs: 0,
      cc_load_policy: 0,
      iv_load_policy: 3,
      autohide: 0
    },
    events: {}
  });
}

2. 修复布局问题

给embedDiv添加浮动和宽度，确保它和左侧表格并排显示：

/* 可以放在<head>的<style>标签里 */
#embedDiv {
  float: left;
  width: 40%;
}

这样修改后，点击条目就能在右侧看到YouTube播放器，div也能正常显示了。

内容的提问来源于stack exchange，提问作者Dennis