Как расположить кнопку в середине Iframe и загружать Iframe только после ее нажатия?

Question

Я создал следующий тестовый код, в котором я создаю Iframe и кнопку и, используя jquery, загружаю содержимое Iframe только после нажатия кнопки.

Код может быть запустить в: https://www.w3schools.com/code/tryit.asp?filename=GE2BVI7NSQ7N

Однако теперь кнопка находится ниже Iframe, и после того, как я нажму ее, она все еще будет там.

То, что я хочу, это чтобы кнопка была центрирована внутри Iframe, что-то вроде кнопки «загрузить это содержимое», и после нажатия кнопки она исчезает.

По сути, я хочу именно то, чем является Itch.io делаю, как на этой странице: https://brackeysgames.itch.io/party-killer. Внутри Iframe есть приложение и кнопка для его загрузки. Как только кнопка нажата, она удаляется и приложение загружается на свое место.

Как мне этого добиться?

$("button").click(function() {
  var iframe = $("#myiFrame");
  iframe.attr("src", iframe.data("src"));
});

.iframe-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

button {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

h1 {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h1>Iframe test</h1>

<div class="iframe-container">
  <iframe id="myiFrame" data-src="https://www.w3schools.com" src="about:blank"></iframe>
</div>

<button type="button">Load Iframe</button>

Answer 1

Вот так

Вам нужно расположить кнопку и спрятать ее под нагрузкой

Я поместил ее в тот же контейнер, что и iframe, и сделал ее абсолютной позицией

$("button").click(function() {
  const $iframe = $("#myiFrame");
  const $but = $(this);
  $iframe.on("load",function() {
    $but.hide();
  })
  $iframe.attr("src", $iframe.data("src"));
});

.iframe-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

button {
  margin: 0 auto;
  display: block;
  position:absolute;
  top:40%;
  left:45%; /* perhaps use calc here */
  justify-content: center;
  z-index:999;
}

h1 {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h1>Iframe test</h1>

<div class="iframe-container">
  <iframe id="myiFrame" data-src="https://www.w3schools.com" src="about:blank"></iframe>
  <button type="button">Load Iframe</button>
</div>