CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Ahmad Akal
Ahmad Akal

Reputation: 95

How to fetch text value from within iFrame

this my code :

<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe" ></iframe>
</br>
<input type="button" value="Start" onclick="get()">
</br>
<input id="textid" type="text">

<script language="JavaScript" type="text/javascript">
function get() {

?????????????

}
</script>

in The text.txt file contains a value of (61.00%)

i want When press the Start button, I want to fetch the value (61.00%), and place it in the textinput (textid)

*Note that the value in the example (61.00%) is variable

Greetings :)

Upvotes: 2

Views: 1328

Answers (2)

cieunteung
cieunteung

Reputation: 1793

you can try below and make sure you access iframe in same domain

<script language="JavaScript" type="text/javascript">
  function getPercent() {
    var iframe = document.getElementById('iframe');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var percent = innerDoc.body.textContent.match(/(\d+\.\d+%)/g)
    // ["17.00%", "0.00%", "61.00%"]
    document.getElementById('textid').value = percent[2];
  }
</script>

<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe"></iframe>
</br>
<input type="button" value="Start" onclick="getPercent()">
</br>
<input id="textid" type="text">

Upvotes: 1

Andy
Andy

Reputation: 63514

Here's how to do it with vanilla JS. I've swapped the inline JS for a more modern JS technique.

HTML

<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe"></iframe>
<button type="button">Start</button>
<input id="textid" type="text">

JS

// Cache the elements
const iframe = document.querySelector('#iframe');
const button = document.querySelector('button');
const input = document.querySelector('input');

// Add an event listener to the button
button.addEventListener('click', handleClick, false);

function handleClick() {

  // Extract the textContent from the iframe content
  const { textContent } = iframe.contentWindow.document.body;

  // Update the input value
  input.value = textContent;
}

Upvotes: 0

Related Questions