如何将 iframe 使用的网页居中

Posted 2023-05-09

技术标签:

【中文标题】如何将 iframe 使用的网页居中【英文标题】：How to center the webpage which used by iframe 【发布时间】：2014-03-26 00:49:47 【问题描述】：

我有一个关于 iframe 的简单奇怪的问题，但如果我能从你那里找到解决方案，我会很高兴 :)

我有一个 iframe，可以查看一些内容，如图片 1

我想要的是当我打开包含网页时看到 iframe（图 2），我想从水平中心查看内容。

谢谢

我的源代码

<!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">
<body>
<div style="width: 1680px; background: #ccc;">
    <div style="float: left; width: 740px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A1</span>
    </div>
    <div style="float: left; width: 740px; height: 60px;"></div>
    <br clear="All" />
    <div style="float: left; width: 320px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A2</span>
    </div>
    <div style="float: left; width: 640px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A3</span>
    </div>
    <div style="float: left; width: 320px; height: 60px;"></div>
    <br clear="All" />
    <div style="float: left; width: 110px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A4</span>
    </div>
    <div style="float: left; width: 220px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
<div style="float: left; width: 220px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A5</span>
    </div>
    <div style="float: left; width: 220px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 110px; height: 60px;"></div>
    <br clear="All" />
    <div style="float: left; width: 5px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 5px; height: 60px;"></div>
    <br clear="All" />
</div>
</body>
</html>

这是iframe之母的代码

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="//melchoyce.github.io/dashicons/css/dashicons.css" rel="stylesheet">
</head>
<body>
<div>
    <div style="float: right; width: 180px; background: #E5E5E5;">
    <ul id="side-menu">
        <li><a href="index.php?mode=index"><div class="dashicons dashicons-admin-home"></div> home</a></li>
        <li><a href="index.php?mode=personal_info"><div class="dashicons dashicons-id-alt"></div> info</a></li>
        <li><a href="index.php?mode=view_network"><div class="dashicons dashicons-networking"></div>newtork</a></li>
        <li><a href="logout.php"><div class="dashicons dashicons-migrate"></div> logout </a></li>
    </ul>
    </div>
        <div style="float: right; margin: 8px;">
            <script type="text/javascript">
                $(window).load(function () 
                    var ifr = $("#ifr"),
                        ifr_doc = ifr.contents(),
                        ifr_doc_w, ifr_w;

                    ifr_w = ifr.width();
                    ifr_doc_w = ifr_doc.width();

                    ifr_doc.scrollLeft(
                        (ifr_doc_w - ifr_w) / 2
                    );
                );
        </script>
        <iframe id="ifr" src="network.php" style="width: 1000px; height: 600px; border: 1px solid #e5e5e5;"></iframe>
    </div>
    <br clear="all" />
    </div>
    </body>
</html>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

【问题讨论】：

发布你的 iframe html 您可以在包含页面jsfiddle.net/MB5er 中尝试这些内容 iframe 是否有src="some_picture" 或 HTML 文档？ @sasikanth — 这一点帮助不大。问题是关于设置框架的默认滚动。感谢您的回复，我已经附上了我的源代码，我想要的几句话正是@Quentin 所说的:) 有人发布了这个链接jsfiddle.net/MB5er 这就是我想要的，但是这个解决方案对我不起作用:( 【参考方案1】：

基于母文档中iframe宽度的iframe居中文档：

$(window).load(function () 
    var ifr = $("#ifr"),           // Iframe from ID
        ifr_doc = ifr.contents(),  // Iframe document from ifr
        ifr_w,                     // Iframe width (in mother document)
        ifr_doc_w;                 // Iframe document width.

    ifr_w     = ifr.width();
    ifr_doc_w = ifr_doc.width();
    
    ifr_doc.scrollLeft(
        (ifr_doc_w - ifr_w) / 2
    );
);

必须使用您的文档 ID 更新 ID。应将代码添加到母文档，而不是 Iframe。 iframe 和母文档必须具有相同的域和协议。

Fiddle sample

编辑：

来自您更新的母文档来源：

你需要输入：

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

到您的<head> 部分，或至少在上面

<script>
$(window).load(function () 
...

脚本部分。 $() 是 jQuery 的一部分。当浏览器加载文档并在加载jquery 之前找到$(window) 部分时，它无法识别它是什么而失败。

工作文件样本：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery.js"></script>
</head>
<body>
<div style="float: right; margin: 8px;">
    <iframe id="ifr" src="network.php"
        style="width: 300px; height: 600px; border: 1px solid #e5e5e5;">
    </iframe>
</div>

<script type="text/javascript">
$(window).load(function () 
    var ifr = $("#ifr"),
        ifr_doc = ifr.contents(),
        ifr_doc_w, 
        ifr_w;

    ifr_w = ifr.width();
    ifr_doc_w = ifr_doc.width();

    ifr_doc.scrollLeft(
        (ifr_doc_w - ifr_w) / 2
    );
);
</script>

</body>
</html>

【讨论】：

谢谢你，这也是我想要的，但也不起作用，即使尝试它也是如此。 @LOUAY：您发布的代码。那是iframe HTML，对吗？母文档的 HTML 和 CSS 是什么？我发布的示例在 jsfiddle 和 local test 中都可以正常工作。而且，我发布的代码：您添加到母文档，而不是 Iframe，对吗？。是的，我将此代码添加到我的 iframe 的母亲中，我在问题中附上了源代码。你能把你在本地测试的页面发给我吗？ @LOUAY：您需要将<script src="https://code.jquery.com/jquery.js"></script> 移动到您的部分——您可能也想将<script src="js/bootstrap.min.js"></script> 移动到那里。对于另一个有同样问题的人，这在 Fiddle 上工作正常，但在我的电脑上却不行。 @user13500 非常感谢您的宝贵时间【参考方案2】：

根据您的 iframe src html，您需要将该内容居中，就像没有 iframe 一样。

其实我找到了另一个解决类似问题的帖子：Centering in CSS, when the object is larger than the viewport

哪个是这样的：

div.wrapper 
    position: absolute;
    left: 50%;

.content 
    position: relative;
    margin-left: -50%;


<div class="wrapper">
    <div class="content">JQUERY BIZ-NASS HERE</div>
</div>

或者试试这个

<body onload='window.scrollTo(400,0);'>    // set the scroll value to 25% of your content width

简单演示：http://codepen.io/anon/pen/flrJg

这也可以根据body宽度/滚动宽度计算并自动设置...类似这样：

<body onload='scrollMe();'>

function scrollMe() 
  if (document.body.scrollWidth > document.body.clientWidth) 
      window.scrollTo(((document.body.scrollWidth-document.body.clientWidth)/2),0)

有关旧版浏览器支持的属性宽度/滚动宽度的一些额外信息的链接：How to get document height and width without using jquery

【讨论】：

这也不起作用，看我搜索 scrollTo 函数并在本地测试此示例 w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto 它工作正常，但是当我像你的答案一样将函数移动到 body 的 onload 事件时，它不起作用检查此代码笔：codepen.io/anon/pen/flrJg .. 然后您可以从那里调整计算以使滚动居中我用滚动量计算更新了 codepen，codepen.io/anon/pen/flrJg ...所以现在你应该有你需要的了本地如“file:///C:\folder_path\index.html”？ ...那么您可能会遇到脚本被阻止的问题您为什么将您接受的答案更改为其他人？【参考方案3】：

我可以看到图像的宽度大于 iframe 的宽度。您可以进行一些图像编辑并使图像与 iframe 宽度相同，或者您可以简单地增加 iframe 的宽度。

【讨论】：

问题不在于图像，这只是示例，我附上了我的源代码【参考方案4】：

这是一个简单的解决方案，不确定它是否 100%（它必须在父文档中运行）：

var iframe = document.getElementBy...;///pick the best way to select your iframe.
iframe.scrollLeft = (iframe.offsetWidth/2)/2;

【讨论】：

这也很优雅。这个解决方案的缺点是它可以在 iframe 中工作，如果 iframe 不在您的控制范围内，您将无法做到。

以上是关于如何将 iframe 使用的网页居中的主要内容，如果未能解决你的问题，请参考以下文章

如何在一个html页面内的div里嵌入一个html页面

如何将我的 iFrame 视频居中（HTML、CSS）

如何水平居中iframe？

我如何在 twitter bootstrap 3 中将 Youtube Video (iframe) 居中？

在一个静态网页有一个iframe标签我要让iframe 默认显示一个网页怎么办?