例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据其中的内容调整其高度,而不使用滚动.
所有浏览器都支持iframe height = 100%吗？
我使用doctype作为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在我的iframe代码中,如果我说:
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是它实际上会占用剩余页面的高度(因为顶部有另一个框架,固定高度为50px)所有主流浏览器(IE/Firefox/Safari)都支持这种格式吗？
关于滚动条,即使我说scrolling="no",我可以在Firefox中看到禁用的滚动条...如何完全隐藏滚动条并自动设置iframe高度？
我尝试了一些解决方案,但没有成功.我想知道是否有一个解决方案,最好有一个易于遵循的教程.
这是我的代码:
(function($){
$.fn.pluginbutton = function (options) {
myoptions = $.extend({ left: true });
return this.each(function () {
var focus = false;
if (focus === false) {
this.hover(function () {
this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
this.removeClass('VBfocus').addClass('VBHover');
}, function () {
this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
this.removeClass('VBfocus').removeClass('VBHover');
});
}
this.mousedown(function () {
focus = true
this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
this.addClass('VBfocus').removeClass('VBHover');
}, function () {
focus = false;
this.animate({ backgroundPosition: …我正在寻找一个好的跨域iframe大小调整脚本,根据其内容调整其高度.我也可以访问html/css以获取iframe的来源.那里有没有？
我需要在框架中嵌入一个HTML页面,并使用以下代码:
<iframe src="http://www.google.com" style="width: 90%; height: 300px"
scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
vspace="0" hspace="0">
我正在尝试将高度设置为自动,以便框架自动调整页面长度,而不必像我在这里那样硬编码高度.我尝试过height:auto,height:inherit但它没有用.
我见过很多人问如何使 iframe 100% 高度。可以使用一些 CSS 轻松存档。它将使 iframe 相对于设备屏幕显示 100%。但是如何根据其内容使 iframe 100% 高度？
这是我当前根据设备屏幕制作 100% iframe 的代码：
iframe {
display: block;
background: #000;
border: none;
height: 100vh;
width: 100vw;
} <iframe src="https://...">Your Browser Does Not Support iframes!</iframe>在allowfullscreen和position:absolute没有除了撞毁我的网站模板的帮助。这是我在不破坏主 CSS 的情况下能做的最好的事情。请帮忙...
编辑：iframe 内容响应使用
<meta name="viewport" content="width=device-width,initial-scale=1">
所以使用javascript预设高度也不起作用。也许有一种使用高度单位的方法？
em, ex,rem等等？或者使它成为特定的百分比vw？
我的页面中有一个iframe.像这样 :
<iframe width="600px">
<html>
<head>
</head>
<body>
<p>Some text</p>
<img src="/foo/bar/test.png" />
</body>
</html>
</iframe>
我希望能够检测iframe内容是否大于600px.我试过这个:
var iframe = $('iframe');
if (iframe.width() < iframe.contents().width()) {
console.log('contents larger than the iframe');
}
它适用于Firefox和Internet Explorer.但不是Chrome.在Chrome上,iframe.contents().width()是600.
我试过iframe.contents().find('body').width()但结果也是600.
如何在Chrome中检测iframe内容的实际宽度？
有没有办法让iframe的高度适合它的内容？你能告诉我怎么做吗？我试着在网上搜索并试用代码,但没有运气
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />
<title></title>
</head>
<body>
<div align="center" style="z-index:1;">
<?php include 'header.html' ?>
<iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>
</div>
</body>
</html>
我想从Iframe中删除滚动条.当我手动设置Iframe的高度时它可以工作,但Iframe大小可以改变,我不知道如何在页面加载时获得Iframe高度.
有没有办法删除滚动条并适合iframe内容？
<div class="portlet" id="pageContainer">
<iframe id="frame" width="100%" frameborder="0" height="2000" scrolling="false" allowfullscreen="" src="/app/mytestapp" style="overflow: hidden"></iframe>
</div>
当我尝试低于功能时,它不会返回正确的高度.(它返回2000px,但我的Iframe高度接近3000px)
$('iframe').load(function() {
this.contentWindow.document.body.offsetHeight + 'px';
});
我一直致力于自动调整 iframe 高度。
该问题的解决方案在 React Hooks 中不起作用。
我已经阅读了在ReactJS中将iframe高度设置为scrollHeight和调整iframe的宽度和高度以适应其中的内容。我已经探索了更多的帖子，并在近一周的时间里尝试了几次。但是，我还没有找到正确的方法来解决这个问题。
我简化了我所尝试的。我的代码
除了我的代码之外，我也尝试过iframeResizer.min.js，但它不起作用。我相信这是因为反应是动态生成的。我发现iframe-resizer-react并尝试过，但还没有找到解决问题的方法。
有人可以有同样的情况吗？如何在 React Hooks 中自动调整 iframe 高度？
iframe ×9
html ×6
javascript ×5
jquery ×4
css ×2
cross-domain ×1
function ×1
height ×1
html-frames ×1
html5 ×1
react-hooks ×1
reactjs ×1
scrollbar ×1
tinymce ×1
width ×1