首页 > 解决方案 > javascript 'replaceChild' 似乎没有改变期望的值

问题描述

我正在测试一个脚本,它基本上可以让我通过 ajax 提取视频源 URL 并更改视频源以尝试向用户隐藏我的视频文件的来源(基本上不希望人们下载我的内容)。

我没有问题让 ajax 工作,但“replaceChild”命令似乎没有为我做任何事情。我剥离了所有的 ajax 并尝试运行一个基本函数,在此过程中使用“警报”调用此命令,以向我展示什么是有效的,什么是无效的,在我看来,replaceChild 命令不起作用。

谁能发现我的代码有任何问题或提供替代解决方案?

<!DOCTYPE html>
<html>
    <head>
        <title>Test Script</title>
        <meta name="robots" content="noindex,nofollow">
        <script type="text/javascript">
            function testFunction(){
                var video = document.getElementById("video2").getElementsByTagName("source")[0];
                var source = "realvideo.mp4";
                clone = video.cloneNode(true);
                alert(clone.src);
                clone.setAttribute("src",source);
                alert(clone.src);
                video.parentNode.replaceChild(clone,video);
                alert(video.src);
            }
        </script>
    </head>
    <body onLoad="testFunction()">
        <div align="center">
            <video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
                <source src="realvideo.mp4" type="video/mp4">
            </video>
        </div>
        <div>
            <video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
                <source src="sorry.mp4" type="video/mp4">
            </video>
        </div>
    </body>
</html>

该代码警告“sorry.mp4”、“realvideo.mp4”、“sorry.mp4”

标签: javascript

解决方案


这是预期的行为。你打电话时:

video.parentNode.replaceChild(clone,video);

video不会突然变成不同的元素。它仍将具有与src以前相同的属性。通过上述调用从文档video分离出来,并代替它被注入......这是一个输入/输出交换。所以你不应该期望它仍然引用文档中的元素并成为与.replaceChildclonevideoclone

要真正验证更改,您可以使用以下代码结束您的功能:

video = document.getElementById("video2").getElementsByTagName("source")[0];
alert(video.src);

推荐阅读