HTML中iframe标签src属性失效问题：通过API实现YouTube视频转音频的功能故障排查

The blank iFrame issue you're facing boils down to one key problem: form submissions trigger a full page refresh by default. When you click the search button, your JavaScript updates the iFrame's src correctly—but then the browser reloads the page, resetting the iFrame back to its empty initial src value. That's why only hardcoding the YouTube link directly in the iFrame works (no page refresh happens there).

Here's how to fix it step by step:

1. Block the form's default submit behavior #

Add e.preventDefault() to your apiworks function to stop the browser from reloading the page when the form is submitted. We'll also add URL encoding to handle special characters in YouTube links (like & or = which can break the API request).

Update your JavaScript like this:

const f = document.getElementById('form');
const q = document.getElementById('query');
const site = 'https://yt-download.org/api/button/mp3?url=';

function apiworks(e){
  // Stop the browser from reloading the page
  e.preventDefault();
  // Encode the user's input to handle special characters in YouTube URLs
  const encodedVideoUrl = encodeURIComponent(q.value);
  const fullApiUrl = site + encodedVideoUrl;
  document.getElementById('buttonApi').src = fullApiUrl;
}

f.addEventListener('submit', apiworks);

2. Adjust the button type (optional but recommended) #

By default, buttons inside forms act as type="submit"—which triggers the form's submit event. Set it to type="button" to avoid accidental page refreshes even if the event listener fails:

<button type="button" onclick="apiworks(event)">Search</button>

Full Working Code #

Here's the complete fixed code with both improvements:

<html>
<body>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const site = 'https://yt-download.org/api/button/mp3?url=';

function apiworks(e){
  e.preventDefault();
  const encodedVideoUrl = encodeURIComponent(q.value);
  const fullApiUrl = site + encodedVideoUrl;
  document.getElementById('buttonApi').src = fullApiUrl;
}

f.addEventListener('submit', apiworks);
</script>
<form id="form" role="search">
  <input type="search" id="query" name="q" placeholder="Paste YouTube video link..." aria-label="Enter YouTube URL for conversion">
  <button type="button" onclick="apiworks(event)">Convert to MP3</button>
</form>
<iframe id="buttonApi" src="" width="100%" height="500px" allowtransparency="true" scrolling="no" style="border:none"></iframe>
</body>
</html>

Why this works: #

• e.preventDefault() stops the page refresh, so your iFrame's updated src stays intact.
• encodeURIComponent() ensures any special characters in the YouTube link are properly formatted for the API request, preventing broken URLs.
• Setting the button to type="button" adds an extra layer of protection against unintended form submissions.

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