来自 IE 中的字符串变量的 iframe 的 src答案

【问题标题】：src of iframe from a string variable in IE来自 IE 中的字符串变量的 iframe 的 src
【发布时间】：2018-07-16 11:32:40
【问题描述】：

我有一个平均堆栈网站。我想动态构造一个包含有效 html 字符串的变量，然后在 iframe 中呈现它。经过一番研究，我尝试了以下代码：(JSBin)

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="https://cdn.rawgit.com/jugglinmike/srcdoc-polyfill/master/srcdoc-polyfill.min.js"></script>
    </head>
    <body ng-app="app" ng-controller="Ctrl">
        <iframe srcdoc="{{content | toTrusted}}"></iframe>
        <script>
            var app = angular.module('app', []);
            app.controller("Ctrl", ["$scope", function($scope) {
                $scope.content = "<b>hello</b>";
            }])
            app.filter('toTrusted', ['$sce', function($sce) {
                return function(text) {
                    return $sce.trustAsHtml(text);
                };
            }]);
        </script>
    </body>
</html>

它在 Chrome 中运行良好，但在 IE（例如 IE 11）中无法运行，即使我使用 src-polyfill。

有人有解决办法吗？

【问题讨论】：

标签： javascript angularjs internet-explorer iframe cross-browser

【解决方案1】：

app.directive('iframeDoc', [ '$sce', function ($sce) {
                return {
                    restrict:"A",
                    scope:{
                        iframeDoc:'='
                    }, 
                    link: function(scope, elem, attrs) {
                        elem.attr("srcdoc", $sce.trustAsHtml(scope.iframeDoc));
                        // Check browser to support scrdoc.
                        var  isSupportSrcDoc= !!("srcdoc" in document.createElement("iframe"));
                        if(!isSupportSrcDoc){
                            var  jsUrl = "javascript: window.frameElement.getAttribute('srcdoc');";
                            if (elem[0].contentWindow) {
                                elem[0].contentWindow.location = jsUrl;
                            }
                            elem.attr("src", jsUrl);
                        }
                    }
                };
            }])

在html中：

<iframe iframe-doc="content"></iframe>

【讨论】：