Using David J Bradshaw's 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.

Currently my wordpress widget reads like this:

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

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>

and that's pretty much all I have right now. I was hoping someone could help me properly install/setup this iframe-resizer.

Thank you.

回答1:

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.

You need to add this js file:

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

Adding js files to Wordpress

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
});

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' );

Make sure you add the iframeResizer.min.js and iframe.js in your themefolder/js/ folder.

You can edit the iframe.js script as you dont need the extra options for the plugin!

来源：https://stackoverflow.com/questions/24613836/using-david-j-bradshaws-iframe-resizer

标签

javascript

jquery

wordpress

iframe

iframe-resizer