I have website A, which I embed in an iframe on website B. Website A has a drop down menu, from which one can change the language of the site.
Problem: when I change the language from the drop down menu from inside the iframe, the whole parent window redirects to website A. I would like the iframe to refresh and the language to change, but to not have the parent window redirect. Here's the html how the iframe is currently embedded:
<iframe src="xxx" scrolling="no" frameborder="no" align="center" height = "600" width = "940">
</iframe>
I tried playing around with the iframe sandbox attribute with the following results:
sandbox="allow-forms allow-scripts" - parent page doesn't redirect, iframe shows blank page after clicking drop down menu
sandbox="allow-forms allow-scripts allow-same-origin" - same as above
sandbox="allow-forms allow-scripts allow-same-origin allow-top-navigation" - page redirects as without sandbox attribute
For the first two I also noticed from the console that I get this message:
Unsafe JavaScript attempt to initiate navigation for frame with URL 'xxx' from frame with URL 'yyy'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set.
Would this suggest that to fix this I must change something on the page that's inside the iframe, and not the parent page? Any ideas?
Have you tried to set target attribute to _self when changing select value?
I.e... Page A:
VARS: <script>document.write(document.location.search)</script><br>
<br>
<form name="f" target="_self">
<select id="langSelect" name="langSelect" onChange="document.f.submit()">
<option value="">...please select...</option>
<option value="en">English</option>
<option value="es">Spanish</option>
</select>
</form>
Page B:
This if page B...<br>
<br>
This is iframe A:<br>
<iframe src="A.html"></iframe>