Javascript 使用David J Bradshaw'；s iframe大小调整器_Javascript_Jquery_Wordpress_Iframe_Iframe Resizer

Javascript 使用David J Bradshaw'；s iframe大小调整器

javascript jquery wordpress iframe

Javascript 使用David J Bradshaw'；s iframe大小调整器,javascript,jquery,wordpress,iframe,iframe-resizer,Javascript,Jquery,Wordpress,Iframe,Iframe Resizer,我有一个Teamspeak状态查看脚本托管在与wordpress不同的域上。因此，我尝试使用iframe在text/html小部件中显示脚本结果，除非它不会自动调整高度。Wordpress位于共享主机上，因此此脚本不会从那里与我的teamspeak服务器通信。我找不到任何其他ts3的观众工作，而自动隐藏空频道，并没有完全丑陋。在做了一些研究之后，我发现了似乎是最新和最好的解决方案。现在我不是这方面的专家，也不完全明白我应该如何正确设置它目前，我的wordpress小部件如下所示： <if

我有一个Teamspeak状态查看脚本托管在与wordpress不同的域上。因此，我尝试使用iframe在text/html小部件中显示脚本结果，除非它不会自动调整高度。Wordpress位于共享主机上，因此此脚本不会从那里与我的teamspeak服务器通信。我找不到任何其他ts3的观众工作，而自动隐藏空频道，并没有完全丑陋。在做了一些研究之后，我发现了似乎是最新和最好的解决方案。现在我不是这方面的专家，也不完全明白我应该如何正确设置它

目前，我的wordpress小部件如下所示：

<iframe src="http://66.172.12.238/ts3.php" width="100%" scrolling="no"></iframe>

<html>
<head>
<title>TSStatus</title>
<link rel="stylesheet" type="text/css" href="/ts3/tsstatus.css" />
<script type="text/javascript" src="/ts3/tsstatus.js"></script>
</head>
<body>
<?php
require_once("/var/www/ts3/tsstatus.php");
$tsstatus = new TSStatus("ts3.greatarchitect.us", 10011);
$tsstatus->useServerPort(9987);
$tsstatus->imagePath = "/ts3/img/";
$tsstatus->timeout = 2;
$tsstatus->hideEmptyChannels = true;
$tsstatus->hideParentChannels = true;
$tsstatus->showNicknameBox = false;
$tsstatus->showPasswordBox = false;
echo $tsstatus->render();
?>
</body>
</html>

ts3.php的内容如下：

<iframe src="http://66.172.12.238/ts3.php" width="100%" scrolling="no"></iframe>

<html>
<head>
<title>TSStatus</title>
<link rel="stylesheet" type="text/css" href="/ts3/tsstatus.css" />
<script type="text/javascript" src="/ts3/tsstatus.js"></script>
</head>
<body>
<?php
require_once("/var/www/ts3/tsstatus.php");
$tsstatus = new TSStatus("ts3.greatarchitect.us", 10011);
$tsstatus->useServerPort(9987);
$tsstatus->imagePath = "/ts3/img/";
$tsstatus->timeout = 2;
$tsstatus->hideEmptyChannels = true;
$tsstatus->hideParentChannels = true;
$tsstatus->showNicknameBox = false;
$tsstatus->showPasswordBox = false;
echo $tsstatus->render();
?>
</body>
</html>


TSStatus

这就是我现在所拥有的一切。我希望有人能帮助我正确安装/设置这个iframe resizer

谢谢。

看起来您需要将js文件添加到

http://66.172.12.238/ts3.php

您的页面和插件页面的示例

您需要添加此js文件：

<script type="text/javascript" src="http://davidjbradshaw.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>

将以下内容添加到主题的functions.php文件中：

    function theme_name_scripts() {
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframeResizer.min.js ', array(), '1.0.0', true );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframe.js ', array(), '1.0.0', true );
    }

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

确保将iframeResizer.min.js和iframe.js添加到您的

themefolder/js/

文件夹中

您可以编辑iframe.js脚本，因为您不需要插件的额外选项

对不起，我不能完全听懂你的话。我在我的ts3.php中添加了以下内容<代码>我不确定我还应该做什么。首先让它在小提琴上工作，然后你可以把它加载到Wordpress上。我没有看到js文件，谢谢，我终于在fiddle上找到了。我的wordpress上必须加载什么？我的印象是html小部件中的iframe就是它。我不认为远程调整iframe源上的内容是可能的，这有安全问题。。另一个js文件显然是通信并相应调整内容大小。请参阅我的更新答案，将js文件添加到wordpress主题@joshlstanks。我照你说的做了。创建iframe.js并将其和iframeResizer.min.js上载到my themes/js文件夹。然后将代码添加到my theme的functions.php中。我已经在我的text/html小部件中添加了

，但它的行为仍然相同，并且没有自动调整大小。我错过什么了吗？