Send Dropdown Value to Iframe

Asked

Viewed 247 times

1

How do I send a value from a Drop Down to a [IFRAME]?

I’m reclaiming the value like this:

function mandaIframe() {
    pai = parent.document.form1; // especifica o elemento de id="formularioX", dentro do documento que é pai da página.
    var idcat = pai.varField_idcat.value; // captura o valor do campo de id="numero", dentro do elemento de id="formularioX", dentro do documento que é pai.
}

But I’m having trouble sending it to Iframe.

javascript jquery asp

  • Yes it is. It’s just below a Dropdown

  • On the same page. Dropdowm above and Iframe below. I want to take the Dropdown value and send it to the page in the IFRAME SRC

  • Yes it is of the Same.

  • Yes I’m using ASP Classico.

  • From the parent page. The Code I sent is just to get the value of the combo. Now I need to play for the iframe.

2 answers

2

You can change the src of iframe taking the value selected in the dropdown and passing this value as parameter in the URL of the iframe:

function mandaIframe() {
   var idcat = document.querySelector("#numero").value; // valor selecionado no dropdown
   document.querySelector("iframe").src = "pagina.asp?id="+idcat; // alterar o src do iframe
}

In the iframe you take the value via ASP with request:

<%
idcat = request("id");
%>

With the variable idcat receiving the value of id in the URL, you do what you want.

0

me general way, the ideal that the communication between different documents is made using message exchange.

Let’s take the following use case, the page should send a text (value of textarea) to the iFrame, the iFrame should update its content based on the received text, then should notify the parent page for it to clear the textarea.

to achieve such a result, you can make use of the window.postMessage(...) and of window.addEventListener('message', function (evt) { ... })

// html/script do iFrame
var html = `
<html>
  <head><\/head>
  <body>
    <div id="box">
      
    <\/div>
    <script type='text/javascript'>
      var box = document.getElementById('box');
      window.addEventListener('message', function (evt) {
        if (evt.origin !== 'null') // modifique o 'null' para a dominio do iframe.
          return;
        box.textContent = evt.data
        window.parent.postMessage('OK', '*') // modifique o '*' para a dominio da pagina pai.
      })
    <\/script>
  <\/body>
<\/html>
`;

// criando a pagina a ser carregada no iFrame.
var blob = new Blob([html], { type: 'text/html' })
document.querySelector('iframe').src = URL.createObjectURL(blob)

var iframe = document.querySelector('iframe')
var textarea = document.querySelector('textarea')
var button = document.querySelector('button')

// enviando uma mensagem para o iframe
button.addEventListener('click', function (evt) {
  iframe.contentWindow.postMessage(textarea.value, '*') // modifique o '*' para a dominio do iframe.
})

// recebendo uma mensagem do iframe
window.addEventListener('message', function (evt) {
  if (evt.origin !== 'null' || evt.data !== 'OK')  // modifique o 'null' para a dominio da pagina.
    return;
  textarea.value = '';
})
textarea, iframe {
  width: 300px;
  height: 120px;
}
<div>
  <textarea></textarea>
  <iframe src='#'></iframe>
</div>
<div><button>Copiar</button></div>

  • @Carmona007 the above code both sends messages to and from iframe.

Browser other questions tagged javascript jquery asp

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