Question

我正在尝试将Twitch流嵌入到我的网站中，以便能够使用一些文本输入和按钮来更改频道。以下是我在此项目中的失败尝试。我预先向我道歉，我对编码非常陌生，而且还有很长的路要走。我该如何解决必须达到的目标？

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myText" value="newtwitchchannel">

<button type="button" onclick="function()">Change Channel</button>

<script>
$(document).ready(function() {
        var oldSrc = $("#SamplePlayerDivID iframe").attr("src");
        var x = document.getElementById("myText");
        var currentVal = x.value;
        var newSrc = oldSrc.replace("channel=monstercat", "channel=+current Val"); "autoplay=1" by "+current Val"
        
        $("#SamplePlayerDivID iframe").attr("src", newSrc);
        
        console.log("Old Src: " + oldSrc);
        console.log("New Src: " + newSrc);
      });
      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SamplePlayerDivID">
  <iframe src="https://player.twitch.tv/?channel=monstercat&muted=true" frameborder="0" style="height: 480; width: 100%;"></iframe>
</div>

</body>
</html>

Answer 1

尝试一下

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myText" value="newtwitchchannel">

<button type="button" onclick="changeChannel()">Change Channel</button>

<script>
function changeChannel() {
    var oldSrc = $("#SamplePlayerDivID iframe").attr("src");
    var x = document.getElementById("myText");
    var currentVal = x.value;
    var newSrc = oldSrc.replace("channel=monstercat", "channel=" + currentVal);

    $("#SamplePlayerDivID iframe").attr("src", newSrc);

    console.log("Old Src: " + oldSrc);
    console.log("New Src: " + newSrc);
}   
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SamplePlayerDivID">
  <iframe src="https://player.twitch.tv/?channel=monstercat&muted=true" frameborder="0" style="height: 480; width: 100%;"></iframe>
</div>

</body>
</html>

我更改了：

无需包装在$(document).ready()中。将您的代码转换为名为changeChannel()的独立函数。
更改onClick的{{1}}属性以调用button。

changeChannel()

语法错误。与您的示例相比，请查看我如何在示例中串联字符串。

在iFrame SRC中更改频道名称

1 个答案: