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