iframe中的Scala动态src不起作用

Question

我试图将 iframe 集成到一个管理 kafka 的工具中，Trifecta。在consumers.html 文件中，我做了如下修改；

    <table style="width: 100%; border: 1px solid #dddddd">
                    <tr style="border-bottom: 1px solid #dddddd">
                                    <th class="col-md-3 left">Partition / Owner</th>
                                    <th class="col-md-3 left">Topic</th>
                                    <th class="col-md-3 left">Consumer</th>
                                    <th class="col-md-2 left">Remaining</th>
                                    <th class="col-md-1 center">Last Updated</th>
                                    <th class="col-md-1 center">Monitor</th>
                    </tr>

                    <tr ng-repeat="coffset in t.offsets | orderBy:'partition'">
                                    <td class="left" title="{{ fixThreadName(t.consumerId, t.threadId) }}">
                                                    {{ coffset.partition }}
                                                    <span ng-show="getConsumerHost(consumer, coffset)" class="small">
                                                                    : {{ getConsumerHost(consumer, coffset) }}
                                                                    (<span class="kafkaProtocolVersion">{{ getConsumerVersion(consumer, coffset) }}</span>)
                                                    </span>
                                                    <span ng-hide="getConsumerHost(consumer, coffset)" class="small null">
                                                                    : Consumer information unavailable
                                                    </span>
                                    </td>
                                    <td class="left">
                                                    {{ coffset.topicEndOffset }}
                                                    <span class="delta_topic small" ng-show="getTopicPartitionDelta(t.topic, coffset.partition)">
                                                                    <img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ getTopicPartitionDelta(t.topic, coffset.partition) | number }}
                                                    </span>
                                    </td>
                                    <td class="left">
                                                    <a ng-click="switchToMessage(coffset.topic, coffset.partition, coffset.offset)">{{ coffset.offset || 0 }}</a>
                                                    <span class="delta_topic small" ng-show="coffset.deltaC">
                                                                    <img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ coffset.deltaC | number }}
                                                    </span>
                                    </td>
                                    <td class="left">
                                                    {{ getMessagesLeft(coffset) | number }}
                                                    <span class="delta_consumer small" ng-show="coffset.deltaC">
                                                                    <img src="/assets/images/tabs/inspect/arrow_consumer.gif"> {{ coffset.deltaC | number }}
                                                    </span>
                                    </td>
                                    <td class="center small">
                                                    <span ng-show="coffset.lastModifiedTime">{{ coffset.lastModifiedTime | duration }}</span>
                                                    <span ng-hide="coffset.lastModifiedTime" class="null">N/A</span>
                                    </td>
                                    <td class="center small">
                                                    <a target="_blank" href="http://192.168.1.12:9020/#/group/{{consumer.consumerId}}/{{ t.topic }}">click</a>
                                    </td>
                    </tr>
                    <tr>
                                    <td colspan="6" style="height:400px;overflow:hidden" consumer="{{consumer.consumerId}}" topic="{{t.topic}}">
                                                    <iframe class="graphiframe" src="http://192.168.1.12:9020/graph.html#/group/{{consumer.consumerId}}/{{t.topic}}" frameborder="0" style="overflow:hidden" height="100%" width="100%">Loading...</iframe>
                                    </td>
                    </tr>
    </table>

a 的 href 有效，但即使链接相同，iframe 也无效。我怎样才能解决这个问题？

谢谢。

Answer 1

检查安全标头：https://www.playframework.com/documentation/2.6.x/SecurityHeaders#Configuring-the-security-headers

Play 2.6 默认将X-Frame-Options 设置为DENY，因此您的页面将不会显示在iframe 中： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

将application.conf 中的frameOptions 设置为null 必须解决您的问题：

play.filters.headers.frameOptions = null