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

要让一个 `iframe` 触发全屏，可以使用 `requestFullscreen()` 方法，例如：

var iframe = document.getElementById('my-iframe');
iframe.requestFullscreen();

而要让 `iframe` 自适应大小，可以在 `iframe` 的 `onload` 事件中，获取 `iframe` 的内容高度，并将 `iframe` 的高度设置为该高度。具体实现代码如下：

<iframe id="my-iframe" src="https://example.com" onload="resizeIframe(this)"></iframe>

<script>
function resizeIframe(iframe) {
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

这个示例会在 `iframe` 加载完成后，获取 `iframe` 的内容高度，并将 `iframe` 的高度设置为该高度，从而实现 `iframe` 的自适应大小。

相关问题

iframe实现点击全屏显示后黑屏

可能是由于浏览器的安全策略导致的，通过 iframe 实现点击全屏显示后黑屏的问题。为了解决这个问题，你可以尝试以下几种方法：

1. 在 iframe 的父页面中，添加一个按钮或者其他交互元素，通过点击该元素来触发全屏显示，而不是直接在 iframe 中触发全屏。
2. 在 iframe 的父页面中，添加一个事件监听器，监听 iframe 的全屏事件，并在全屏事件触发时处理黑屏问题。可以尝试在全屏事件触发后重新加载 iframe 内容或者重新设置 iframe 的样式。
3. 如果使用的是第三方库或者插件实现 iframe 的全屏功能，可以查看相关文档或者社区来获取更多关于解决黑屏问题的方法。

echart图实现自适应屏幕大小

ECharts 图表库提供了多种实现自适应屏幕大小的方式，以下是其中两种常用的方式：

1. 使用 `resize` 事件

在 ECharts 初始化完成后，可以监听窗口大小变化事件，并在事件触发时调用 ECharts 实例的 `resize()` 方法进行图表的重绘。具体代码如下：

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
  myChart.resize();
});

2. 使用 CSS 样式

通过设置图表容器的 CSS 样式，可以让图表自适应容器大小。具体代码如下：

<div id="myChart" style="width:100%;height:100%;"></div>

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));

// 设置图表容器的 CSS 样式
myChart.resize();

这种方式需要在初始化 ECharts 实例后手动调用 `resize()` 方法，以适应容器大小的变化。

以上两种方式都可以实现图表的自适应屏幕大小，具体选择哪种方式取决于实际需求和开发习惯。