从iframe中获取iframe属性的值

Get Value of iframe Attribute from Within That iframe

本文关键字：iframe 属性 获取      更新时间：2023-09-26

我有一个iframe，它具有自定义的data-*属性，该属性接受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是用数据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>

不，这将是跨站点脚本。

基本上，来自一个域的javascript无法访问另一个域，而不会出现各种潜在问题，因此它会被浏览器阻止。

你能做到这一点的唯一方法是同时拥有源和目标，并确保它们在同一个域上，在这种情况下，你可能不需要IFrame。

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

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

由于我的iframe源与我的原始页面在同一个域上，我可以使用以下方法检索我的ifame属性的值：

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

尽管我确实同意@Toni Leigh的观点，即我可能一开始就不需要iframe，但就目前而言，上述方法会很好。

相关文章：