1

有谁知道如何将 iFrame 内的内容居中？我在想用 Javascript 和 innerHTML 做点什么，但我想不通。任何帮助表示赞赏:) 即使将 iFrame 的宽度设置为与内容的宽度相匹配（可能像 jpg url 或其他东西）也会很棒，因为这样我就可以在页面的正确宽度时将 iFrame 居中它正在显示的页面。

编辑：我想出了如何让这部分工作（使用我在谷歌上找到的代码），但问题是当我尝试在 PHP 中（使用 _get）它停止工作时......例如制作一个名为 test 的 php 文件.php

这是php文档的代码：

<?php
print '<title>blah blah blah</title><body bgcolor="#505050"><br />
<script type="text/javascript">document.domain="' . htmlspecialchars($_GET["image"]) .  '";</script> <SCRIPT LANGUAGE=\'javascript\'> 
function resize_iframe(){ 
document.getElementById(\'textoforo\').height=100; 
document.getElementById(\'textoforo\').height=window.frames["textoforo"].document.body.scrollHeight; 
document.getElementById(\'textoforo\').width=100; 
document.getElementById(\'textoforo\').width=window.frames["textoforo"].document.body.scrollWidth; 
}
</SCRIPT><div style="z-index:99; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#505050;"><table style="vertical-align:middle; text-align:center; height:90%; width:100%; background-color:#FFF"><center><td style="vertical-align:middle; height:100%;"><center><iframe id=\'textoforo\' 
name=\'textoforo\' 
border=1 
src=\'' . htmlspecialchars($_GET["image"]) . '\' 
width=768 
height=800 
MARGINWIDTH=0 
MARGINHEIGHT=0 
onload=\'resize_iframe();\' 
> 
</iframe></center></td></center></table></center></div></body>';
?>

并转到网址：

“//test.php?image=http://www.all2need.com/wp-content/uploads/2012/04/African-Daisy-Flower.jpg”

当您加载页面时它不起作用，但是如果您复制源代码并将其粘贴到 html 文档中，它确实有效！！！！！！！？？？所以我认为javascript试图在PHP输入图像URL（使用_Get）之前检索高度和宽度变量，因此它返回零值？不知道……有什么想法吗？

4

4 回答 4

2

你正在寻找一种DOM-Ready方法。您可以自己编写一个，但如果您没有大量的 javascript 经验，您可能需要考虑使用 Javascript 框架来为您处理。

这些应该可以帮助您确定何时开始调整大小/重新定位脚本。

就个人而言：jQuery 社会有点大，支持更好，所以你可能想要使用更常用的东西。

于 2012-11-03T08:17:41.310 回答
1

将图像直接加载到 an 中的问题iframe是它在 HTML 中没有样式或任何DOM可以操作的适当位置。它只会按原样显示图像。因此，解决方案是将 iframe 调整为内容大小（每个浏览器不同），然后将 iframe 居中。

我看不出，PHP 适合所有这些。

也许这是一个不错的选择： http: //fancybox.net/（查看底部的示例）

于 2012-11-02T22:28:54.773 回答
1

您应该弄清楚目标网址是否是图像。如果是图片使用这种方式设置 iframe 的尺寸：

list ($width, $height) = getimagesize(htmlspecialchars($_GET["image"]));

然后就可以直接给iframe设置宽高了。

如果它不是图像使用这种方式：

    <?php
print '<title>blah blah blah</title><body bgcolor="#505050">
<script type="text/javascript">
function getDocHeight() {
    var D = document.getElementById("textoforo").document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function getDocWidth() {
    var D = document.getElementById("textoforo").document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}
function resize_iframe()
{ 
    /*
    Use getDocHeight and getDocWidth to set the dimensions
    */
}
</SCRIPT>
<style type="text/css">
html,body
{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
</style>
<div style="z-index:99; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#FF00FF;">
<iframe id="textoforo" 
name="textoforo" 
border="1" 
src="' . htmlspecialchars($_GET["image"]) . '"
MARGINWIDTH="0" 
MARGINHEIGHT="0" 
onload="resize_iframe();"> 
</iframe>
</div>
</body>';
?>

尽管如此，我仍然无法理解您的问题及其用途。

编辑： Onload 事件对我来说是正确的（FF，IE）。您使用哪个浏览器？

于 2012-11-08T11:37:46.880 回答
1

iframe 的内容只是一个单独的 html 文档。您可以使用 php 文件，但无需将所有内容放在 php 标记之间并打印（使用“echo”）所有 html 代码。使其成为带有<head>, <html> and <body>标签的适当页面。如果要设置 iframe 内容的样式，则可以加载外部 css 文件。

iframe 本身是它所在的主 html 页面的一部分。您在 iframe 中执行的 Javascript 只会影响该 iframe 内的元素。要解决这个问题，您可以将 javascript 放在主页中，并在 iframe 中使用

parent.yourfunction();

如果您只想在页面上放置图像，为什么要使用 iframe？使用<div>带有内部图像的 a 并为其设置样式。

于 2012-11-02T15:04:29.107 回答