我正在将页面从 $http.get 加载到 iFrame 中。 $http.get 检索完整的 HTML 页面,就好像它是本机导航到的一样,但是当我将内容附加到 iframe 时,内容将加载到 HTML 标记之外......以及检索到的原始 HTML 标记文件现已丢失。
控制器:
// call to $http.get() service
clubService.eventShow($scope.club.ceID)
.then(function(res) {
if (res.success == true) {
$scope.eventItem.urlHTML = $sce.trustAsHtml(res.data);
$scope.eventItem.isLogin = 1 ;
}
}) ;
HTML:
<iframe id="eventFrame" ng-bind-html="eventItem.urlHTML" style="width:100%;height:100%;"> </iframe>
渲染到页面的是:
<iframe id="eventFrame" ng-bind-html="eventItem.urlHTML" style="width:100%;height:100%;" class="ng-binding">
#document
<html>
<head></head>
<body></body>
</html>
// HERE IS WHERE IMPORTED HTML IS ATTACHED:
//
// <!DOCTYPE html>, <HTML> and <BODY> tags are stripped
// ...but they are in the raw response, visible in the chrome dev tools network session
//
// All the below html is NOT a child of #document either, its at the same level.
<meta ...>
<link ...>
<script> ...</script>
<main>
.... all the page code
<main>
</iframe>
如何将加载的 HTML 文档正确附加到我的 iframe?
我花了一段时间才发现,除了我如何将 HTML 文档附加到 iFrame 之外,一切都是正确的:
我将 iframe 更改为:
<iframe id="eventIframe" ng-src="{{eventItem.urlHTML}}" style="width:100%;height:100%;"</iframe>
致:
<iframe id="eventIframe" ng-attr-srcdoc="{{eventItem.urlHTML}}" style="width:100%;height:100%;"</iframe>
一切都很完美