使用David J Bradshaw的iframe调整器 [英] Using David J Bradshaw's iframe-resizer
问题描述
我有一个Teamspeak状态查看脚本，该脚本托管在与我的wordpress不同的域上.因此，我尝试使用iframe在text/html小部件中显示脚本结果，除非它不会自动调整高度.Wordpress位于共享主机上，因此该脚本不会从那里与我的teampeak服务器通信.我找不到自动隐藏空白频道且并不十分丑陋的其他ts3查看器.经过研究后，我发现了似乎是最新最好的解决方案， David J Bradshaw的iframe-resizer .现在，我不是这个主题的专家，也不完全理解我应该如何正确设置它.
I have a Teamspeak status viewing script hosted on a different domain than my wordpress. So I'm trying to show the script results in a text/html widget using an iframe except it will not auto-size the height. Wordpress is on shared hosting so this script will not communicate with my teamspeak server from there. I cannot find any other ts3 viewers that work while auto-hide empty channels and not completely ugly. After doing some research I came across what appears to be the latest and greatest solution, David J Bradshaw's iframe-resizer. Now I'm no expert on the subject and don't completely understand how I should set this up properly.
当前，我的wordpress小部件的内容如下:
Currently my wordpress widget reads like this:
<iframe src="http://66.172.12.238/ts3.php" width="100%" scrolling="no"></iframe>
ts3.php的内容如下:
ts3.php reads like this:
<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.
and that's pretty much all I have right now. I was hoping someone could help me properly install/setup this iframe-resizer.
谢谢.
推荐答案
您似乎需要将js文件添加到 http://66.172.12.238/ts3.php
It looks like you need to add a js file to your http://66.172.12.238/ts3.php
请参见此处的小提琴，以及插件页面的示例.
See fiddle here of your page and the example of the plugin page.
您需要添加此js文件:
You need to add this js file:
<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
I dont know if you have any knowledge on how to load extra js files to Wordpress. If not, read here http://codex.wordpress.org/Function_Reference/wp_enqueue_script
将js文件添加到Wordpress
我自己将其添加到js文件中以执行调整大小，我将其命名为iframe.js:
I would add this to a js file on it's own to execute the resizer, I'll name it iframe.js:
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
});
将此添加到您主题的functions.php文件中:
Add this to your functions.php file of your theme:
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.
Make sure you add the iframeResizer.min.js and iframe.js in your themefolder/js/ folder.
您可以编辑iframe.js脚本，因为您不需要插件的其他选项！
You can edit the iframe.js script as you dont need the extra options for the plugin!
这篇关于使用David J Bradshaw的iframe调整器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
