那些遇到过的问题

相关疑难解决方法(0)

根据内容调整iframe大小

我正在开发类似iGoogle的应用程序.来自其他应用程序(在其他域上)的内容使用iframe显示.

如何调整iframe的大小以适应iframe内容的高度？

我试图破译谷歌使用的javascript,但是它被混淆了,到目前为止搜索网络已经没有结果.

更新:请注意,内容是从其他域加载的,因此适用同源策略.

javascript iframe widget

lar*_*ssg
2016 03-30
496
推荐指数
6
解决办法
31万
查看次数

调整iframe的宽度和高度以适应其中的内容

我需要一个解决方案自动调节的width和height一个iframe勉强适合其内容.关键是iframe加载后可以更改宽度和高度.我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化.

html javascript iframe adjustment

Sto*_*art
2018 08-01
281
推荐指数
10
解决办法
59万
查看次数

是否有跨域iframe高度自动调整器有效？

我尝试了一些解决方案,但没有成功.我想知道是否有一个解决方案,最好有一个易于遵循的教程.

iframe cross-domain

J82*_*J82
2015 11-05
95
推荐指数
3
解决办法
9万
查看次数

iFrame高度自动(CSS)

我的iframe有问题.我真的希望框架根据iframe中的内容自动调整高度.我真的想通过没有javascript的CSS来做到这一点.但是,如果我也有,我会使用javascript.

我试过height: 100%;和height: auto;,等我只是不知道什么尝试!

这是我的CSS.对于框架......

#frame {
  position: relative;
  overflow: hidden;
  width: 860px;
  height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

然后是框架的页面.

#wrap {
  float: left;
  position: absolute;
  overflow: hidden;
  width: 780px;
  height: 100%;
  text-align: justify;
  font-size: 16px;
  color: #6BA070;
  letter-spacing: 3px;
}
Run Code Online (Sandbox Code Playgroud)

页面的编码看起来像这样......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ??         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <div id="container">    
    <div id="header">
    </div>

  <div …
Run Code Online (Sandbox Code Playgroud)

html css iframe height

Swe*_*ice
2016 07-16
29
推荐指数
3
解决办法
10万
查看次数

获取iframe中输入字段的值

我正在创建一个只使用Javascript的表单.我试图使用Javascript来获取输入字段的值iframe.是否有可能获得一个内部字段的值iframe？

html javascript iframe html5

Muh*_*bar
2013 02-21
19
推荐指数
3
解决办法
9万
查看次数

自动设置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">
Run Code Online (Sandbox Code Playgroud)

我正在尝试将高度设置为自动,以便框架自动调整页面长度,而不必像我在这里那样硬编码高度.我尝试过height:auto,height:inherit但它没有用.

html html5

use*_*780
2017 07-18
12
推荐指数
3
解决办法
11万
查看次数

如何根据其内容使 iframe 100% 高度

我见过很多人问如何使 iframe 100% 高度。可以使用一些 CSS 轻松存档。它将使 iframe 相对于设备屏幕显示 100%。但是如何根据其内容使 iframe 100% 高度？

这是我当前根据设备屏幕制作 100% iframe 的代码：

        iframe {
        display: block;
        background: #000;
        border: none;
        height: 100vh;
        width: 100vw;
    }
Run Code Online (Sandbox Code Playgroud) 
    <iframe src="https://...">Your Browser Does Not Support iframes!</iframe>
Run Code Online (Sandbox Code Playgroud)

在allowfullscreen和position:absolute没有除了撞毁我的网站模板的帮助。这是我在不破坏主 CSS 的情况下能做的最好的事情。请帮忙...

编辑：iframe 内容响应使用

<meta name="viewport" content="width=device-width,initial-scale=1">

所以使用javascript预设高度也不起作用。也许有一种使用高度单位的方法？

em, ex,rem等等？或者使它成为特定的百分比vw？

html css iframe

Ant*_*ung
2018 03-14
8
推荐指数
3
解决办法
4万
查看次数

iOS 11 WebKit iframe错误的解决方法

iOS WebKit iframe错误描述

iOS WebKit将iframe的大小调整为其内容的完整大小(见下图).这是一个自2016年以来已知的错误,但仍未在iOS 11中解决:https://bugs.webkit.org/show_bug.cgi？id = 155198

iOS 11

我目前的发现

1.对于固定的iframe内容(例如视频)

它足以在下面应用CSS,但它可以防止iframe内容滚动.

.fixed iframe {
    width: 0;
    height: 0;

    min-width: 100%;
    min-height: 100%;    
}
Run Code Online (Sandbox Code Playgroud)

2.对于可滚动的iframe内容(例如页面)

  1. 我们需要两个iframe容器:一个作为边界(固定大小),第二个作为滚动区域.
  2. 要适合iframe内容,其div容器必须以像素为单位定义w/h.任何相对度量(如%,vw/vh)都不起作用.

  3. 一些RWD页面(假设"不完整的RWD")正在经历iframe溢出(iframe不适合iframe容器).不幸的是,我们无法从iframe中解决这个问题并解决此问题,iframe中的文档至少需要:

    body {
    max-width: 100vw !important;
}
    Run Code Online (Sandbox Code Playgroud)

    或者,我们可以将iframe内容缩放为最后的手段.

  4. 因为2,为了保持容器比例,我们至少需要使用CSS媒体查询或JS来调整其高度.

一些不完整的解决方案:

我的解决方法发布在答案中.

iframe mobile-webkit

Krz*_*oda
2018 04-12
7
推荐指数
1
解决办法
8795
查看次数

div 的范围外部 CSS 文件（没有 CSS 文件应该只链接）

在我的页面中，我有三个 CSS 文件

bootstrap.css
main.css
icon.css
Run Code Online (Sandbox Code Playgroud)

这是我页面中的三个文件

我的页面中的功能

  • 正在使用 Onload ,Onclick 功能
  • 当我单击链接时，HTML将加载外部文件
  • 外部文件有自己的CSS file名字style.css

    错误

加载外部文件时，它会链接到bootstarp.css如何停止外部文件链接，此文件将加载外部文件

<div class="page">
<!--/external file loading place-->                
</div>
Run Code Online (Sandbox Code Playgroud)

我如何链接style.css到class="page"

  • 没有其他 CSS 文件应该链接到里面class="page"

html css

作者
2014 10-16
6
推荐指数
2
解决办法
9336
查看次数

根据角度2中的内容大小调整Iframe的高度

我想根据 iframe 的内容大小调整其高度

这是我的组件文件：

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
constructor( private sanitizer: DomSanitizer){}

 hideFeed(myFeed){
       this.iframeURL = this.sanitizer.bypassSecurityTrustResourceUrl( myFeed.contentUrl);     
this.showIframe = true;
Run Code Online (Sandbox Code Playgroud)

这是我的 HTML 文件：

<div class="container-fluid" *ngIf = "showIframe" >
  <div class="col-lg-12 col-md-12 col-xs-12" class="feedIframe">  
      <iframe  scrolling="auto" frameborder="0"        
        style=" position: relative; height: 100%; width: 100%;"  [src]="iframeURL">
      </iframe>
       <a (click) = "refreshPage()" class="button">
          <span style="color: #555;" >BACK</span>
      </a>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

angular

Utk*_*tam
lucky-day
5
推荐指数
1
解决办法
2万
查看次数

根据内容高度调整iframe高度

我正在尝试根据内容的高度和宽度(网页)调整iframe的大小.我已经使用了我在堆栈的其他答案中找到的代码.对于新宽度的设置,似乎有效,但我无法达到工作的高度,我不知道为什么.

您可以在此处查看和编辑我的示例:http://jsfiddle.net/dzorz/pvtr3/

这是我的HTML:

<iframe id="finance-iframe" class="finance-iframe" src="http://wordpress.org" width="100%" height="300px" marginheight="0" frameborder="0" onLoad="autoResize('finance-iframe');"></iframe>
Run Code Online (Sandbox Code Playgroud)

和javascript:

function autoResize("finance-iframe"){
  var newheight;
  var newwidth;

  if(document.getElementById){
    newheight=document.getElementById("finance-iframe").contentWindow.document.body.scrollHeight;
    newwidth=document.getElementById("finance-iframe").contentWindow.document.body.scrollWidth;
  }

  document.getElementById("finance-iframe").height= (newheight) + "px";
  document.getElementById("finance-iframe").width= (newwidth) + "px";
}
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么？

html javascript css iframe

dzo*_*rdz
lucky-day
3
推荐指数
2
解决办法
3万
查看次数

显示嵌入谷歌文档的完整文档长度

如何在 iframe 上没有滚动条的情况下显示嵌入式 google 文档的完整长度？

<html>
<style>
    body { margin: 0; padding: 0; o}
    iframe { margin-left: 2vw; margin-top: 2vh; height: 100%; width: 90vw; }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>

<iframe srcdoc="" frameborder="0" scrolling="no" height="100%"></iframe>

    <script>
        $(function() {
            $.get("https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true", function(html) {
                var contents = $("iframe").contents();

                contents.find("html").html(html);

                setTimeout(function() {
                    contents.find('a[href^="http://"]').attr("target", "_blank");
                    contents.find('a[href^="https://"]').attr("target", "_blank");
                }, 1000); // Actually not sure if timeout is required here...
            });
        });
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

显示屏可能会显示一页半的文本并停止。

html javascript google-docs

use*_*438
lucky-day
2
推荐指数
1
解决办法
3986
查看次数

标签 统计

html ×8

iframe ×8

javascript ×5

css ×4

html5 ×2

adjustment ×1

angular ×1

cross-domain ×1

google-docs ×1

height ×1

mobile-webkit ×1

widget ×1