可以使用 html iframe 名称属性指定 元素的引用。在 javascript 中，对元素的引用也是使用 name 属性进行的。 iframe 本质上用于在当前显示的网页中显示网页。包含 iframe 的文档的 url 使用“src”属性指定。
语法以下是 html 的语法
<iframe src=url title=description></iframe>
为了更好地了解如何裁剪 html iframe，让我们看看以下示例。
示例在下面，我们使用 div，使 iframe 被裁剪，并且使 iframe 的滚动不显示其输出。
<!doctype html><html> <body> <div style=position: absolute; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;> <div style=overflow: hidden; margin-top: -100px; margin-left: -25px;> </div> <iframe src=https://www.tutorialspoint.com/index.htm scrolling=no style=height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; > </iframe> </div> </body></html>
当脚本执行时，它将生成一个由 iframe 组成的输出，该 iframe 被裁剪并嵌入到网页上，没有可滚动选项。
示例考虑以下示例，我们在 iframe 中使用 div 类和 css 来裁剪并显示其输出。
<!doctype html><html> <body> <style> iframe { position: fixed; top: -40px; left: 0; bottom: 0; right: 0; width: 65%; height: 70%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 999999; } </style> <div class=iframe> <iframe src=https://www.tutorialspoint.com/index.htm></iframe> </div> </body></html>
运行上述脚本时，将弹出输出窗口，显示被裁剪并滚动显示在网页上的 iframe。
示例执行下面的代码并观察我们如何通过运行脚本并将可滚动设置为 no 来裁剪 iframe。
<!doctype html><html> <body> <style> body { margin: 0; padding: 0; height: 100vh; } h1 { font-family: impact, sans-serif; color: #8e44ad; } iframe { width: 1024px; height: calc(100vh - 300px); overflow: hidden; margin: 0 auto; border: none; } </style> <h1 id=tutorial>tutorialspoint</h1> <p>the best e-way learning</p> <iframe id=booking-content title=booking-content src=https://www.tutorialspoint.com/index.htm scrolling=no allowfullscreen=allowfullscreen> </iframe> <script> let tutorial = 0; let element = document.getelementbyid('tutorial'); while (element.nodename !== 'iframe') { tutorial += element.offsetheight; element = element.nextelementsibling; } tutorial = window.innerheight - tutorial - 100; document.queryselector('iframe').style.height = tutorial + 'px'; </script> </body></html>
输出当脚本运行时，它将生成一个输出，其中包括文本以及已裁剪的 iframe，将可滚动减少为“无”。
以上就是我如何裁剪html中的iframe？的详细内容。