标签: iframe

使Iframe适合容器剩余高度的100%

我想设计一个带有横幅和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)

任何想法都表示赞赏.

html css iframe

236
推荐指数
10
解决办法
51万
查看次数

重新加载/刷新iframe的最佳方法是什么?

我想重新加载一个<iframe>使用JavaScript.我发现到目前为止最好的方法是将iframe的src属性设置为自身,但这不是很干净.有任何想法吗?

javascript iframe

229
推荐指数
8
解决办法
40万
查看次数

229
推荐指数
4
解决办法
31万
查看次数

全屏iframe,高度为100%

所有浏览器都支持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 javascript css iframe html-frames

227
推荐指数
10
解决办法
70万
查看次数

如何水平居中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?我怎么能集中对齐它?

html css iframe alignment center-align

219
推荐指数
9
解决办法
35万
查看次数

YouTube Iframe嵌入自动播放

我正在尝试嵌入YouTube视频的新iframe版本并将其设置为自动播放.

据我所知,没有办法通过修改URL的标志来做到这一点.有没有办法通过使用JavaScript和API来做到这一点?

html javascript youtube iframe youtube-api

212
推荐指数
8
解决办法
73万
查看次数

如何从AngularJS中的变量设置iframe src属性

我正在尝试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 javascript iframe angularjs angularjs-directive

210
推荐指数
3
解决办法
23万
查看次数

无法加载资源:net :: ERR_INSECURE_RESPONSE

有没有办法欺骗服务器,所以我没有得到这个错误:

内容已被阻止,因为它未由有效的安全证书签名.

我正在将一个html网站的iframe拉到另一个网站,但我一直在这个问题的标题中得到控制台(chrome)错误,在Internet Explorer中它说:

内容已被阻止,因为它未由有效的安全证书签名.

iframe self-signed ssl-certificate chromium

206
推荐指数
5
解决办法
32万
查看次数

根据里面的内容制作iframe高度动态 - JQUERY/Javascript

我在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中崩溃.我真的很困惑/失去了为什么会发生这种情况.

javascript asp.net iframe jquery

193
推荐指数
6
解决办法
39万
查看次数

jQuery .ready在动态插入的iframe中

当有人点击图片时,我们使用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准备就绪时能够执行我们的代码,而不仅仅是它的父级?

javascript iframe jquery thickbox galleria

181
推荐指数
4
解决办法
34万
查看次数