从该iframe中获取iframe属性的值

Question

I have an iframe with a custom data-* attribute that takes the value of an option in my select tag. I'm trying to retrieve the value of this data-id within a form that is rendered in an iframe by referencing that iframe attribute.

EDIT: My iframe is and original DOM are on the same domain

My form:

<select id="option-dropdown">
    <option value="opt-1">Option 1</option>
    <option value="opt-2">Option 2</option>
</select>

Script to pull the option selected:

var optionSelected = $('#option-dropdown').val();

And here my iframe is declared with the data-id:

'<iframe id="edit-iframe" data-id="' + optionSelected + '" src="/somePage + '"></iframe>'

And finally my form that is rendered within the iframe. Can this form get reference to the iframe's data-id ?

<form action="/someAction" method="post>
    <input id="input-1" value="optionSelected"/>
    <input id="input-2" value="someOtherValue"/>
    <button id="save" >Save</button>
</form>

Answer 1

No, this would be cross site scripting .

Basically javascript from one domain cannot access another domain without all sorts of potential problems so it's blocked by the browsers.

The only way you could do it would be by owning both the source and the target and making sure they were on the same domain, in which case you probably wouldn't need an IFrame.

Answer 2

Use window.opener . for instance, inside the iframe: window.opener.document.getElementById('edit-iframe').getAttribute('data-id')

(of course, assuming both pages are on the same domain)

Answer 3

Being that my iframe source is on the same domain as my original page, I can retrieve the value of my iframe attribute with this method:

var optionSelected = window.frameElement.getAttribute("data-id");

Though I do agree with @Toni Leigh on the fact that I probably don't need an iframe in the first place, but for the time being the above method will do fine.