How do I put a button inside an iframe

Friend, it's easier if you leave some clear points about the iframe and what you intend to do.

• Is the iframe domain the same as the page it's embedded in?

  You are not allowed to change the content of an iframe that belongs to another domain, for example, if your page is running on link and your iframe has the src attribute link , for example, you will not be able to make any changes to this iframe's content.

• Do you want to dynamically add the button using Javascript ?

  If you just want to add a button and have access to the file that the referenced iframe makes it easier to change this file directly, if you need to do this dynamically with Javascript you can access the contents of the iframe with window.frames[0].document . Remember, you can only change using Javascript if the iframe content is in the same domain as your page.

In this link you can learn a bit more about the iframe element and how to use it link

Use a DIV for this purpose, one iFrame serves to load another HTML, another file.

Like other colleagues, I can not see any utility in this approach, but one possibility is to create a document in memory:

var iFrames = document.querySelectorAll("[data-content]");
[].forEach.call(iFrames, function(frameElement, indice) {
  var frameContent = document.getElementById(frameElement.dataset.content);
  var blob = new Blob([frameContent.innerHTML], { type: "text/html" });
  frameElement.src = URL.createObjectURL(blob);
  frameContent.parentNode.removeChild(frameContent);
});

<iframe id="frame1" data-content="frameContent1"></iframe>
<iframe id="frame2" data-content="frameContent2"></iframe>

<script id="frameContent1" type="text/template">
    <input type="button" value="Enviar 01" />
</script>

<script id="frameContent2" type="text/template">
    <input type="button" value="Enviar 02" />
</script>

Q: The above technique is very useful when you want to print only a portion of the page and the use of @media print is not enough to achieve the desired result.