What's the difference between iframe src and srcdoc?

I don"t know if the title is clear.
Let me go straight to the code:

const iframe = document.createElement("iframe")
iframe.src = "./iframe.html"
// iframe.srcdoc = "<script>console.log("test");</scrip" + "t>";
document.body.appendChild(iframe)

class App extends React.Component {

  componentDidMount() {
    Hook(iframe.contentWindow.console, (log) => {
      console.log(log);
    })
  }
}

// iframe.html
  <script>
      console.log("test")
  </script>

if you use iframe.src = ". / iframe.html" here, you can get the log information of iframe.contentWindow.console in Hook, but if you use iframe.srcdoc, you can"t catch that. (Hook is a third-party library, so you won"t write it here.)

do you know why?

Mar.20,2021
Menu