how to include an external html with javascript in iFrame

Question

I am trying to get html with javascript (with relative paths inside this javascript script tag) using rest service and show it in the iFrame in my angularjs application.

basically we are integrating with webfocus and webfocus provides html contents when we call the rest service. This html content has script tag in it and this script tag has relative paths. so when I try to bind that html/javascript to iFrame's contentWindow.document.body I am getting relative path issue.

Any help would be much appreciated.

Angularjs directive is as follows.

.directive("preview", ['$sce',function ($sce) {
    function link(scope, element) {
        var iframe = document.createElement('iframe');
        iframe.setAttribute("id", "ifWebFocusContent");
        iframe.setAttribute("name", "nameWebFocusContent");

        var element0 = element[0];
        element0.appendChild(iframe);
        var body = iframe.contentWindow.document.body;
        //var body = iframe.document.body;

        scope.$watch('content', function () {                
            body.innerHTML = $sce.trustAsHtml(scope.content);
        });
    }

    return {
        link: link,
        restrict: 'E',
        scope: {
            content: '='
        }
    };
}])

And HTML code is <preview content="reportHtml"></preview>

I used this link to write this code.

Answer 1

It got resolved when I add base tag in the iframe as here Also used these 3 lines inside watch instead of assigning inner html.

 iframe.contentWindow.document.open();
                iframe.contentWindow.document.write($sce.trustAsHtml(scope.content));
                iframe.contentWindow.document.close()