使用 David J Bradshaw 的 iframe-resizer

Question

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

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

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

ts3.php 如下所示：

<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>

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

谢谢你。

Answer 1

看起来您需要将 js 文件添加到您的http://66.172.12.238/ts3.php

请参阅您页面的小提琴here和插件页面的示例。

你需要添加这个js文件：

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

我不知道您是否知道如何将额外的 js 文件加载到 Wordpress。 如果没有，请在此处阅读http://codex.wordpress.org/Function_Reference/wp_enqueue_script

将 js 文件添加到 Wordpress

我会将其添加到它自己的 js 文件中以执行调整大小，我将其命名为 iframe.js：

iFrameResize({
    log                     : true,                  // Enable console logging
    enablePublicMethods     : true,                  // Enable methods within iframe hosted page
});

将此添加到主题的 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' );

确保在你的themefolder/js/文件夹中添加 iframeResizer.min.js 和 iframe.js。

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

使用 David J Bradshaw 的 iframe-resizer

问题描述

1 个解决方案

解决方案1
5 已采纳 2014-07-07 17:04:10

使用 David J Bradshaw 的 iframe-resizer

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-07-07 17:04:10

解决方案1
5 已采纳 2014-07-07 17:04:10