我想设计一个带有横幅和iframe的网页.我希望iframe可以填充所有剩余的页面高度,并在浏览器调整大小时自动调整大小.是否有可能在没有编写Javascript代码的情况下完成它,只有CSS?
我尝试设置height:100%iframe,结果非常接近,但iframe试图填充整个页面高度,包括30px横幅div元素的高度,所以我得到了不必要的垂直滚动条.这不完美.
更新说明:请原谅我没有好好描述这个问题,我在DIV上尝试了CSS margin,padding属性来成功占据网页的整个提醒高度,但这个技巧对iframe没有用.
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>Run Code Online (Sandbox Code Playgroud)
任何想法都表示赞赏.
我想重新加载一个<iframe>使用JavaScript.我发现到目前为止最好的方法是将iframe的src属性设置为自身,但这不是很干净.有任何想法吗?
所有浏览器都支持iframe height = 100%吗?
我使用doctype作为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Run Code Online (Sandbox Code Playgroud)
在我的iframe代码中,如果我说:
<iframe src="xyz.pdf" width="100%" height="100%" />
Run Code Online (Sandbox Code Playgroud)
我的意思是它实际上会占用剩余页面的高度(因为顶部有另一个框架,固定高度为50px)所有主流浏览器(IE/Firefox/Safari)都支持这种格式吗?
关于滚动条,即使我说scrolling="no",我可以在Firefox中看到禁用的滚动条...如何完全隐藏滚动条并自动设置iframe高度?
考虑以下示例:( 现场演示)
HTML:
<div>div</div>
<iframe></iframe>
Run Code Online (Sandbox Code Playgroud)
CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Run Code Online (Sandbox Code Playgroud)
结果:

为什么iframe不像中心那样集中对齐div?我怎么能集中对齐它?
我正在尝试嵌入YouTube视频的新iframe版本并将其设置为自动播放.
据我所知,没有办法通过修改URL的标志来做到这一点.有没有办法通过使用JavaScript和API来做到这一点?
我正在尝试src从变量设置iframe 的属性,我无法让它工作......
标记:
<div class="col-xs-12" ng-controller="AppCtrl">
<ul class="">
<li ng-repeat="project in projects">
<a ng-click="setProject(project.id)" href="">{{project.url}}</a>
</li>
</ul>
<iframe ng-src="{{trustSrc(currentProject.url)}}">
Something wrong...
</iframe>
</div>
Run Code Online (Sandbox Code Playgroud)
控制器/ app.js:
function AppCtrl ($scope) {
$scope.projects = {
1 : {
"id" : 1,
"name" : "Mela Sarkar",
"url" : "http://blabla.com",
"description" : "A professional portfolio site for McGill University professor Mela Sarkar."
},
2 : {
"id" : 2,
"name" : "Good Watching",
"url" : "http://goodwatching.com",
"description" : "Weekend experiment to help my …Run Code Online (Sandbox Code Playgroud) 有没有办法欺骗服务器,所以我没有得到这个错误:
内容已被阻止,因为它未由有效的安全证书签名.
我正在将一个html网站的iframe拉到另一个网站,但我一直在这个问题的标题中得到控制台(chrome)错误,在Internet Explorer中它说:
内容已被阻止,因为它未由有效的安全证书签名.
我在iframe中加载一个aspx网页.Iframe中的内容可以比iframe的高度更高.iframe不应该有滚动条.
我div在iframe中有一个包装器标签,基本上就是所有的内容.我写了一些jQuery来调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
Run Code Online (Sandbox Code Playgroud)
包含TB_window它的div在哪里
Iframe.
body - iframe中aspx的body标签.
此脚本附加到iframe内容.我TB_window从父页面获取元素.虽然这在Chrome上运行良好,但TB_window在Firefox中崩溃.我真的很困惑/失去了为什么会发生这种情况.
当有人点击图片时,我们使用jQuery thickbox动态显示iframe.在这个iframe中,我们使用galleria一个javascript库来显示多张图片.
问题似乎是$(document).ready在iframe似乎过早被解雇并且iframe内容甚至尚未加载,因此galleria代码未在DOM元素上正确应用. $(document).ready似乎使用iframe父就绪状态来决定iframe是否准备就绪.
如果我们在单独的函数中提取由文档就绪调用的函数,并在超过100毫秒后调用它.它有效,但我们不能利用慢速计算机生产机会.
$(document).ready(function() { setTimeout(ApplyGalleria, 100); });
Run Code Online (Sandbox Code Playgroud)
我的问题:我们应该绑定哪个jQuery事件,以便在动态iframe准备就绪时能够执行我们的代码,而不仅仅是它的父级?
iframe ×10
javascript ×7
html ×6
css ×3
jquery ×2
alignment ×1
angularjs ×1
asp.net ×1
center-align ×1
chromium ×1
galleria ×1
html-frames ×1
self-signed ×1
thickbox ×1
youtube ×1
youtube-api ×1