Question

有谁知道如何集中iFrame内的内容？我在想用Javascript和innerHTML做些什么，但我无法弄清楚。任何帮助是赞赏:)甚至设置iFrame的宽度以匹配内容的宽度（可能像一个jpg网址或其他东西）将是伟大的，因为我可以只在我的页面上的iFrame中心，当它是适当的宽度页面正在显示。

编辑：我想出了如何让这部分工作（我在谷歌上找到的代码），但问题是当我尝试在PHP中使用它时（使用_get）它停止工作...例如make a php文件名为test.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）之前检索高度和宽度变量，所以它返回nil值？我不知道......有什么想法吗？

Answer 1

您正在寻找DOM-Ready方法。你可以自己写一个，但如果你没有很多javascript经验，你可能要考虑使用一个Javascript框架来处理这个问题。

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

http://api.jquery.com/ready/

http://mootools.net/docs/core/Utilities/DOMReady

jQuery 示例：

 $(document).ready(function() {
   /* Your logic here */
 });

这相当于调用：

 $(function() {
   /* Your logic here */
 });

MooTools 示例：

window.addEvent('domready', function() {
  /* Your logic here */
});

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

Answer 2

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

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

在iframe中对其进行处理

parent.yourfunction();

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

Answer 3

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

我没有看到，PHP适用于所有这些。

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

Answer 4

您应该弄清楚目标网址是否是图片。如果是图像，请使用这种方式设置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 Event对我来说是正确的（FF，IE）。你使用哪种浏览器？

使用PHP $ _get在iFrame内部居中的内容

4 个答案: