javascript - 在wordpress中使用javascript在直播Ustream的flash和iframe版本之间切换

Question

我正在尝试制作一个按钮，用于在我嵌入个人网站的 ustream 直播 channel 的 flash 版本和 iframe 版本之间切换

闪现代码:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="392" id="utv786564"><param name="flashvars" value="autoplay=false&amp;brand=embed&amp;cid=3064708"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/><embed flashvars="autoplay=false&amp;brand=embed&amp;cid=3064708" width="640" height="392" allowfullscreen="true" allowscriptaccess="always" id="utv786564" name="utv_n_665786" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></object>

iframe 代码:

<iframe width="640" height="392" src="http://www.ustream.tv/embed/3064708?v=3&amp;wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;">    </iframe>
<br /><a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">Broadcast live streaming video on Ustream</a>

对于这个范围，我使用以下代码:

JavaScript:

var newHTML = 'html2';
var oldHTML = document.getElementById('divtabone').innerHTML;

function changeText3(){  
    var currentHTML = document.getElementById('divtabone').innerHTML;
if (currentHTML!=newHTML) 
       {
     document.getElementById('divtabone').innerHTML = newHTML;
}
else
  {
document.getElementById('divtabone').innerHTML = oldHTML;
}
}

html:

<div id='divtabone'>html1</div>
<input type='button' onclick='changeText3()' value='change Html'/>

用上面报告的 flash 和 iframe 代码替换 html1 和 html2

工作演示:

https://jsfiddle.net/nqj2L07j/2/

我已经在我的测试站点 wordpress 中插入了这段代码:

http://www.grigione.5gbfree.com/test/

但是当我点击更改 html 按钮时，我怎么能看到我只能将视频从 flash 版本更改为 iframe 版本一次，因为如果我重新点击 我想返回到 Flash 版本，它仍保留在 iframe 版本中 我在这里用代码做了一个演示:

https://jsfiddle.net/z36e77ru/1/

我在 wordpress 的 functions.php 文件中插入的代码如下:

function mia_on_load_script()
{
    // Not our page, do nothing
    if( !is_page( 'test' ) )
        return;
?>

    <script type="text/javascript">
var newHTML = '<div id="1" style="margin-left: 0px; padding: 0px; float: left; width: 640px; height: 392px; border: 0px;"><iframe width="640" height="392" src="http://www.ustream.tv/embed/3064708?v=3&amp;wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe></div><div id="2" style="margin-left: 0px; padding: 0px; float: left; width: 320px; height: 392px; border: 0px;"><iframe style="border: 0 none transparent;" src="//www.ustream.tv/socialstream/3064708" width="320" height="392" frameborder="no"></iframe></div>';
var oldHTML = document.getElementById('divtabone').innerHTML;

function changeText3(){  
    var currentHTML = document.getElementById('divtabone').innerHTML;
if (currentHTML!=newHTML) 
       {
     document.getElementById('divtabone').innerHTML = newHTML;
}
else
  {
document.getElementById('divtabone').innerHTML = oldHTML;
}
}
</script>


    <?php   
    };        
add_action( 'wp_head', 'mia_on_load_script' );

?>

页面中的html http://www.grigione.5gbfree.com/test/ :

<div id="divtabone"><div id="1" style="margin-left: 0px; padding: 0px; float: left; width: 640px; height: 392px; border: 0px;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" id="utv786564"><param name="flashvars" value="autoplay=false&amp;brand=embed&amp;cid=3064708"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/><embed flashvars="autoplay=false&amp;brand=embed&amp;cid=3064708" width="640" height="360" allowfullscreen="true" allowscriptaccess="always" id="utv786564" name="utv_n_665786" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></object></div> <div id="2" style="margin-left: 0px; padding: 0px; float: left; width: 320px; height: 392px; border: 0px;"><iframe style="border: 0 none transparent;" src="//www.ustream.tv/socialstream/3064708" width="320" height="392" frameborder="no"></iframe></div></div>
<input type='button' onclick='changeText3()' value='click to change'/>

为什么在 wordpress 中不起作用？冷是缓存的问题吗？还有其他解决问题的方法吗？ 谢谢

Answer 1

您好，所以我再次调查了您的问题。如果您以这种方式尝试，会发生什么情况？

试试这个 fiddle : https://jsfiddle.net/nqj2L07j/6/

var flash = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="392" id="utv786564"><param name="flashvars" value="autoplay=false&amp;brand=embed&amp;cid=3064708"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/><embed flashvars="autoplay=false&amp;brand=embed&amp;cid=3064708" width="640" height="392" allowfullscreen="true" allowscriptaccess="always" id="utv786564" name="utv_n_665786" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></object>';
var iframe = '<iframe width="640" height="392" src="http://www.ustream.tv/embed/3064708?v=3&amp;wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;">    </iframe><br /><a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">Broadcast live streaming video on Ustream</a>';
var is_flash = true;

$(document).ready(function () {
    $('#btn1').click(function () {
        if (is_flash) {
            $('#divtabone').html(iframe);
            is_flash = false;
        } else {
            $('#divtabone').html(flash);
            is_flash = true;
        }
    });
});