let's say I have this iframe
<iframe id="someID" class="someClass"
frameborder="0" scrolling="no"
src="some link"
style="some style here"></iframe>
And this example of content iframe:
<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>
I need to get value from input from this iframe. I am trying to find all iframes on my page (because it is not only iframe). Then I need to get input value, but I don't know how to do it:
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 =
}
}
I can't change application infrastructure, so this is only one way to get the unique iframe
<body data_frameName="uniqueBodyIframe" style="zoom: 1;">
First, if you don't have a .class, #id, or some other identifying attribute on target iframe, you can collect all of them inyo a NodeList:
const win = document.querySelectorAll('iframe');
Then determine the index position of target iframe so you can use the bracket notation and index to target iframe. Use the .contentDocument property to hook into the document object within iframe and the .value property to get the input value.
// This is targeting the third iframe
let val = win[2].contentDocument.querySelector('input').value;
The example below will not work on SO due to security measures in sandbox. If you want to test it, you can copy and paste it to a text editor and save it with the html extension. (*.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>