从该iframe中获取iframe属性的值

Question

我有一个带有自定义data-*属性的iframe，该属性在我的select标签中带有一个选项的值。 我正在尝试通过引用iframe属性在iframe中呈现的表单中检索此data-id的值。

编辑：我的iframe和原始DOM在同一域中

我的表格：

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

脚本来拉选择的选项：

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

在这里，我的iframe用data-id声明：

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

最后是我在iframe中呈现的表单。 此表单可以引用iframe的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

不，这将是跨站点脚本 。

基本上，来自一个域的javascript在没有各种潜在问题的情况下无法访问另一个域，因此它被浏览器阻止。

唯一的方法是拥有源和目标，并确保它们位于同一域中，在这种情况下，您可能不需要IFrame。

Answer 2

使用window.opener 。 例如，在iframe中： window.opener.document.getElementById('edit-iframe').getAttribute('data-id')

（当然，假设两个页面都在同一个域中）

Answer 3

由于我的iframe源与我的原始网页位于同一域中，因此可以使用以下方法检索iframe属性的值：

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

尽管我确实同意@Toni Leigh的事实，即我可能首先不需要iframe，但暂时使用上述方法会很好。