html ifream触发全屏,IFrame自适应大小（全屏已实现）

要让一个IFrame自适应大小，可以使用以下方法：

1. 使用JavaScript动态设置IFrame的高度和宽度，以匹配其内容的大小。可以使用以下代码：

var iframe = document.getElementById('myiframe');
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
iframe.style.width = iframe.contentWindow.document.body.scrollWidth + 'px';

2. 使用CSS设置IFrame的高度和宽度为100%，这样它将填充其父元素的整个空间。可以使用以下代码：

#iframe-wrapper {
  width: 100%;
  height: 100%;
}
 
#iframe-wrapper iframe {
  width: 100%;
  height: 100%;
}

要让一个IFrame触发全屏，可以使用以下方法：

1. 使用JavaScript将IFrame元素设置为全屏模式。可以使用以下代码：

var iframe = document.getElementById('myiframe');
 
if (iframe.requestFullscreen) {
  iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
  iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
  iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
  iframe.msRequestFullscreen();
}

2. 在IFrame的父元素中添加一个全屏按钮，并使用JavaScript将IFrame设置为全屏模式。可以使用以下代码：

var iframe = document.getElementById('myiframe');
var fullscreenButton = document.getElementById('fullscreen-button');
 
fullscreenButton.addEventListener('click', function() {
  if (iframe.requestFullscreen) {
    iframe.requestFullscreen();
  } else if (iframe.webkitRequestFullscreen) {
    iframe.webkitRequestFullscreen();
  } else if (iframe.mozRequestFullScreen) {
    iframe.mozRequestFullScreen();
  } else if (iframe.msRequestFullscreen) {
    iframe.msRequestFullscreen();
  }
});

请注意，在使用JavaScript设置IFrame为全屏模式时，必须在用户交互（例如单击按钮）之后才能触发。这是为了防止恶意网站将IFrame设置为全屏模式。