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.

Relativity · Accepted Answer · 2018-09-29 20:11:45Z

0

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()

answered Sep 29, 2018 at 20:11

Relativity

6,92822 gold badges83 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to include an external html with javascript in iFrame

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related