As I put a button inside iframe

Asked

Viewed 1,081 times

1

I tried several ways and could not. I did so:

<iframe id="ifrTeste" >
 <input type="button" /> ou <button...></button>
</iframe>

I couldn’t get the button to appear inside the iframe.

  • 1

    This does not exist. iframe calls a page by attribute SRC. And inside the page you can put the button.

  • So there is no way I can call an iframe only and inside it a button. This is not possible, from what I understand.

  • 3

    But what is your goal to want to do that ? There are other ways to do it. There’s no way to put elements inside an iframe.

  • Why are you using an iframe? What is the purpose of the button?

  • 2

    iframe,is not a tag that will be opened and closed with elements between this tag, it is an object that renders an external element through the source of the archive src="boot.html", for you to place a button inside an iframe, you must build two pages, one for the button and the other to insert the iframe.

  • @Ivanferrer, thanks. Diego Souza had already told me this. Guys, we don’t always have control of the situation. The reason now is a test that I am doing, to know how it is done, because something similar will be asked and I will have to know, so the question. I know looking like this has no purpose, but it does. This whole site I’m working on is based on Iframe, all of it and done in ASP. Being an extremely giant site (work in only one part), of course there is no way to remake it with a newer technology.

Show 1 more comment

3 answers

4

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

  • Iframe Domain is the same as the page on which it is inserted ?

    You are not allowed to change the content of an iframe that belongs to another domain, for example, if your page is running on http://localhost and your iframe has the src attribute with the value http://google.com, for example, you will not be able to make any changes to the contents of this iframe.

  • You want to add the button dynamically using Javascript ?

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

In this link you can learn a little more about the iframe element and how to use it https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

3

Use a DIV for this purpose, an iframe serves to load another HTML, another file.

  • This does not provide an answer to the question. To criticize or ask for clarification from an author, leave a comment below its publication - you can always comment on your own publications and when you have reputation points enough you will be able comment on any publication.

  • The project here is all based on Iframe and I’m doing a test for a change that will be made, which is why it should be done with Iframe. If it were up to me, it wouldn’t even be done in ASP, as is the case here. I’m just following the flow here. It’s a gigantic portal that we’re not going to change, just make things work that at the moment are making mistakes.

0

Like the other Members, I cannot see the use of 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>

P.S.: the above technique is quite useful when you want to print just a snippet of the page and the use of @media print is not enough to achieve the desired result.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.