javascript - 在 iframe 中显示下拉列表？

Question

我的应用程序在另一个网络应用程序 (Tableau 服务器) 的 iframe 中运行。我的应用程序中的下拉菜单应该呈现在 iframe 之外，即呈现在另一个应用程序的 DOM 上。

我已经使用了 Sumoselect我的应用程序中用于下拉选项的 JQuery 插件作为 extension 添加到 Tableau 仪表板它将在 iframe 中运行。

我试图将我的应用程序的位置和 z-index 更改为绝对和 1000 根据这个 solution但这没有帮助。

修改 Sumoselect JQuery 插件的样式也没有帮助。

// Sumoselect css modification
.SelectClass {
    position: absolute;
    z-index: 1000;
}

// iframe modification 
iframe {
    border: 0px none;
    width: 1090px;
    height: 167px;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1000;
}

任何帮助将不胜感激。提前致谢!

Answer 1

请检查，如果您的应用程序和父应用程序在同一个域中，那么您可以轻松地在父应用程序中呈现或动态创建下拉列表。如果您的域不同，则跨源策略将不允许您访问父元素。

如果在同一个域中。请使用下面的 javascript/jquery 代码:-

$(parent.document).find('body').append(put your dropdown code html);    

希望这对您有所帮助。