Question

我在这里遇到了一个难题，这可能仅仅是JS的限制，但这里是代码并且它的工作原理是ONCE。然后......永远不会再来。不知道为什么。

它基本上是用每个JS调用中设置的代码替换TD内容。初始表设置为只通过VLC插件从IP设备打开流通道。当页面加载时，默认代码在表中运行正常。

然后，当我点击一个按钮时，它会交换正确的代码，新的流会关闭，然后它再也无法运行了：（...

似乎没有什么令人难以理解的处理，我显然遗漏了某些东西或者某些限制知识？

感谢您的任何见解。

块引用

<table><tr><td id="TABLENAME">
<embed pluginspage="http://www.videolan.org"
            type="application/x-vlc-plugin"
            version="VideoLAN.VLCPlugin.2"
            id="srcVIDEO4"
            width="324"
            height="132"
            autoplay="yes" loop="no"
            target="rtsp://192.168.88.235:556/stream.sdp" />
</td></tr></table>

<script>
function display556VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:556/stream.sdp" />';

    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

function display557VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:557/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

function display558VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:558/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

function display559VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:559/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

</script>
<button style="background-color:green" type="button" onclick="display556VIDEO4()">6</button>-
<button style="background-color:green" type="button" onclick="display557VIDEO4()">7</button>-
<button style="background-color:green" type="button" onclick="display558VIDEO4()">8</button>-
<button style="background-color:green" type="button" onclick="display559VIDEO4()">9</button><br/>

块引用

Answer 1

Number.isNan(new Date()); // This should return true

只需使用

function display558VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:558/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.insertBefore(document.createRange().createContextualFragment(strVIDEO4),trElementVIDEO4.firstChild)

}

而不是

trElementVIDEO4.insertBefore(document.createRange().createContextualFragment(strVIDEO4),trElementVIDEO4.firstChild)

所有你的脚本中的

也可以不在标记中放置点击事件，而是将它们保存在javascript中

而不是

trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;

使用

<button style="background-color:green" type="button" onclick="display556VIDEO4()">6</button>-
<button style="background-color:green" type="button" onclick="display557VIDEO4()">7</button>-
<button style="background-color:green" type="button" onclick="display558VIDEO4()">8</button>-
<button style="background-color:green" type="button" onclick="display559VIDEO4()">9</button><br/>

并在javascript中放置以下代码：

 <button style="background-color:green" type="button" id= '556VIDEO4'>6</button>-
<button style="background-color:green" type="button" id= '557VIDEO4'>7</button>-
<button style="background-color:green" type="button" id= '558VIDEO4'>8</button>-
<button style="background-color:green" type="button" id= '559VIDEO4'>9</button><br/>

Answer 2

发现它！

我需要在var str声明中包含<TD id="TABLENAME">和结束</TD>！当它交换时，它正在移除TD。把它们放回原处，原始代码效果很好。

感谢您的调试帮助！

为什么这个脚本只运行一次？仅替换元素一次，然后再不替换元素

2 个答案: