3

It works fine when I'm using document.querySelector("input[value='female']").click() in test2.php and selects the radio button with the value of female, but it doesn't work in test1.php, when test2.php is inside of an iframe. Is there any work around I can use to fix this?

test1.php 

<iframe src="http://chatwithibot.com/test2.php"></iframe>

test2.php 

<form action="/testx.php" method = "POST">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
<input type="submit" value="Submit">
</form>

Edit: the duplicate solution link seems to only answer question about how to select things from inside an iframe, but not how to change them.

frosty
  • 2,559
  • 8
  • 37
  • 73
  • 1
    Possible duplicate of [QuerySelector for Web Elements Inside iframe](https://stackoverflow.com/questions/26630519/queryselector-for-web-elements-inside-iframe) – Jordan Soltman Jan 12 '19 at 04:22
  • 1
    @JordanS I read that one, and tried document.querySelectorAll('iframe').("input[value='female']").click(); but it doesn't seem to work. – frosty Jan 12 '19 at 04:25
  • You could simply add the radio click js code in the iframe within `` – Hp_issei Jan 12 '19 at 10:14

2 Answers2

2

Let's give an id to your iframe to make sure we can find it without difficulties:

<iframe id="testpage" src="http://chatwithibot.com/test2.php"></iframe>

then:

document.getElementById("testpage").contentWindow.document.querySelector("input[value='female']").click()

Explanation:

  • we find the iframe
  • we use its contentWindow.document
  • from there on we can call querySelector as you did
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • This all works perfectly. However, there is one last hurdle to go through before I can actually use this. I actually need to use this with cross origin, and I don't want to turn off cross origin block on google chrome, because I heard it's a security breach. Anyway to bypass this? I asked another question on this here: https://stackoverflow.com/questions/54157154/bypassing-a-blocked-frame-with-origin-from-accessing-a-cross-origin-frame-with-p?noredirect=1#comment95145037_54157154 – frosty Jan 13 '19 at 00:19
  • You can use your server as a proxy. Assuming that you intend to load page XYZ inside the iframe, you can create an XYZ.php page which sends a request to XYZ and displays the response in the page. You will need to resolve the problems which might arise from relative URLs. Also, make sure that whatever you do is goodwilling and legal. – Lajos Arpad Jan 13 '19 at 00:24
0

Is necessary access to the iframe for select radio button inside of him. The next code access to all iframes in the actual document and run a call-back function for each.

document.querySelectorAll('iframe').forEach( item =>
   item.contentWindow.document.body.querySelector("input[value='female']").click()
)

if only need access to one iframe try this :

document.getElementById("frame_id").contentWindow.document.querySelector("input[value='female']").click()

Pipe Soto
  • 320
  • 2
  • 9