Using IFrames In AngularJS
Solution 1:
As for AngularJS 1.2, there you should use the $sce
service:
<iframe width="500" height="400" ng-src="{{detailFrame}}"></iframe>
$scope.detailFrame= $sce.trustAsResourceUrl("http://www.google.com");
Good luck...
Solution 2:
Due to Same Origin Policy, you can't get cross domain data by using XMLHttpRequest.
I'm not quite sure that what you really want to do.
You could try to bind iframe src attribute and clicked link url together to achieve the function if you just want iframe to show the web page which user cliked.
I wrote a simple example:
HTML
<div ng-app ng-controller="searchPage">
<div ng-repeat="page in searchResults">
<a ng-click="itemDetail(page._infoLink)">{{page.label}}</a>
</div>
<iframe width="500" height="400" ng-src="{{detailFrame}}"></iframe>
</div>
JS
function searchPage($scope){
$scope.searchResults = [{label:"BBC",_infoLink:"http://www.bbc.co.uk/"},{label:"CNN",_infoLink:"http://edition.cnn.com/"}];
$scope.itemDetail = function(link){
$scope.detailFrame = link;
};
}
Here is the jsFiddle demo
BTW... You could try server proxy if you really want to use XMLHttpRequest to grab data from 3-party web site and dump it to somewhere (You can't dump data to iframe src attribute! It only accepts the URL of web page).
Solution 3:
Really struggled on just using regular dom to st iframe.src. Grr... Angular bends the light toward it.
.state('nav.iframer', {
url: '/iframer',
templateUrl: 'app/dashboard/iframer.html',
controller: function($rootScope, $sce){
var f = window.frames.iframer;//
this.frameUrl= $sce.trustAsResourceUrl("http://www.google.com");
},
controllerAs: 'framed'
})
template:
<iframe name="iframer" width="900" height="900" ng-src="{{framed.frameUrl}}"></iframe>
Solution 4:
I think some more clarification is needed along with another example.
$sce is a service that you MUST inject. The reason it it is not included automatically is the overhead of performance, you certainly WANT to be able to only load up services that you NEED.
$sce.trustasResourceURL thus is important
Example:
angular.module('tips')
.controller('TipsCtrl',
function ($http, $scope, UserService, $location, $routeParams, Categories, Tip, error, $sce) {
// various code
$scope.detailFrame = $sce.trustAsResourceUrl("http://localhost:17308/Home/Index/2"); //hard coded
})
Then the IFrame:
<iframe ng-src="{{detailFrame}}" align="middle" width="1000" height="800" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
Post a Comment for "Using IFrames In AngularJS"