JavaScript结合loader.to API实现YouTube视频下载故障求助

你的代码里有几个关键问题导致点击按钮后无效果，逐个修复即可：

1. 变量名大小写不匹配 #

download函数的参数定义是Link（大写L），但函数内部拼接URL时用的是link（小写l），这会导致URL中的url=后面是undefined，iframe加载完全无效。

2. HTML标签转义错误 #

你在拼接iframe时用了<和>转义字符，浏览器会把这些当成纯文本渲染，而不是解析成真正的iframe标签，自然不会加载API的功能模块。

3. 补充必要的输入元素 #

原HTML里缺少.link视频链接输入框和.format格式选择器，这会导致JS获取不到核心参数，API也无法正常工作。

修正后的完整代码 #

JavaScript

$(".btn").click(function() {
    var link = $(".link").val();
    var format = $(".format").children("option:selected").val();
    download(link, format);
});

// 统一参数名大小写，和调用时保持一致
function download(link, format) {
    $('.button-container').html('<iframe style="height:50px; border:none; overflow:hidden;" src="https://loader.to/api/button/?url=' + link + '&amp;f=' + format + '"></iframe>');
}

HTML

<section>
    <input type="text" class="link" placeholder="输入YouTube视频链接">
    <select class="format">
        <option value="mp4">MP4</option>
        <option value="mp3">MP3</option>
        <!-- 按需添加其他格式选项 -->
    </select>
    <div class="button-container">
        <button class="btn" type="button">start</button>
    </div>     
</section>

CSS

section .button-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    width: 500px;
}

section .button-container button {
    height: 50px;
    border-radius: 5px;
    font-size: 20px;
    border: none;
    color: #fff;
    background-color: #2af598;
    letter-spacing: 1px;
    cursor: pointer;
}

修复后点击按钮，就能正确生成包含loader.to API的iframe，实现下载功能了。

内容的提问来源于stack exchange，提问作者rootgeorgia