Question

我有一个带有custom 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

不，这将是cross site scripting。

基本上，来自一个域的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，但目前上述方法会很好。

从iframe中获取iframe属性的值

3 个答案: