3

I have created 5 widgets in one html page and now I want to embed that page in another application; but I am bit confused on how to do it. Do I need to use iframe and call the page or any other way like that?

I have used iframe and embedded it in other applications but it is showing a menu bar and side bar as well. I only need to show widgets and I am using angularjs.

The application where I am embedding the dashboard page is a simple html page which doesn't have any script loaded in it.

Sample code which I have used:

<iframe src="http://localhost:8080/maxApp/#/dashboard" width="100%" height="100%">
Mike Schwartz
  • 2,182
  • 1
  • 17
  • 26
Mayur
  • 1,123
  • 3
  • 22
  • 38

1 Answers1

1

You need to make that URL as trusted by calling method trustAsResourceUrl.

Code in JS:

$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
}

HTML

<iframe ng-src="{{trustSrc(yourURL)}}" src=" width="100%" height="100%">

Here is a sample Application

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Thanks @Sajeetharan for your quick reply, with this i want to send login username and password. so should i send in url or some other way to send and access in parent function – Mayur Dec 06 '15 at 12:55
  • Yes if you dont want it to be secured , you can pass in url otherwise follow the messaging mechanism to send the variables from iframe to parent – Sajeetharan Dec 06 '15 at 13:03
  • Thanks @Sajeetharan ones again. it really helped me will go through messaging mechanism tutorial or some sample code. – Mayur Dec 06 '15 at 13:10
  • 1
    http://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent – Sajeetharan Dec 06 '15 at 13:11