digamos que tengo este iframe
<iframe id="someID" class="someClass" frameborder="0" scrolling="no" src="some link" style="some style here"></iframe>
Y este ejemplo de iframe de contenido:
<html> <head> <meta charset="utf-8"> <title></title> </head> <body data_frameName="uniqueBodyIframe" style="zoom: 1;"> <div class="autocompleteInput"> <input type="text" autocomplete="off" aria-autocomplete="list" class="react-autosuggest__input" value="some value"> ... some code.... </div> </body> </html>
Necesito obtener valor de la entrada de este iframe. Estoy tratando de encontrar todos los iframes en mi página (porque no es solo iframe). Entonces necesito obtener el valor de entrada, pero no sé cómo hacerlo:
oWindow = window.top; var iframes = (oWindow).$('iframe'); for (var i = 0, len = iframes.length; i < len; i++) { var iframeDoc = iframes[i].contentDocument ? iframes[i].contentDocument : iframes[i].contentWindow.document; if ($(iframeDoc.body).attr('data_frameName') === 'uniqueBodyIframe') { var inputValue = } }
No puedo cambiar la infraestructura de la aplicación, por lo que esta es solo una forma de obtener el iframe único
<body data_frameName="uniqueBodyIframe" style="zoom: 1;">
Primero, si no tiene un .class
, #id
o algún otro atributo de identificación en el iframe de destino, puede recopilarlos todos en una lista de nodos:
const win = document.querySelectorAll('iframe');
Luego determine la posición del índice del iframe de destino para que pueda usar la notación de corchetes y el índice para el iframe de destino. Utilice la propiedad .contentDocument
para vincular el objeto del documento dentro del iframe y la propiedad .value
para obtener el valor de entrada.
// This is targeting the third iframe let val = win[2].contentDocument.querySelector('input').value;
El siguiente ejemplo no funcionará en SO debido a las medidas de seguridad en la zona de pruebas. Si desea probarlo, puede copiarlo y pegarlo en un editor de texto y guardarlo con la extensión html. (*.html).
const getVal = e => { e.preventDefault(); const io = e.currentTarget.elements; const win = document.querySelectorAll('iframe'); let val = win[2].contentDocument.querySelector('input').value; io.view.value = val; }; const ui = document.forms.ui; ui.onsubmit = getVal;
<iframe src='example.com' height='10'></iframe> <iframe src='example.com' height='10'></iframe> <iframe srcdoc="<!doctype html><html><head></head><body><input value='BINGO!'></body></html>" height='50'></iframe> <iframe src='example.com' height='10'></iframe> <form id='ui'> <button>Get Value</button><br> <output id='view'></output> </form>