AngularJS में एक चर से iframe src विशेषता कैसे सेट करें

Question

मैं srcएक चर से एक iframe की विशेषता सेट करने की कोशिश कर रहा हूँ और मैं इसे काम करने के लिए नहीं कर सकता ...

मार्कअप:

<div class="col-xs-12" ng-controller="AppCtrl">

    <ul class="">
        <li ng-repeat="project in projects">
            <a ng-click="setProject(project.id)" href="">{{project.url}}</a>
        </li>
    </ul>

    <iframe  ng-src="{{trustSrc(currentProject.url)}}">
        Something wrong...
    </iframe>
</div>

नियंत्रक / app.js:

function AppCtrl ($scope) {

    $scope.projects = {

        1 : {
            "id" : 1,
            "name" : "Mela Sarkar",
            "url" : "http://blabla.com",
            "description" : "A professional portfolio site for McGill University professor Mela Sarkar."
        },

        2 : {
            "id" : 2,
            "name" : "Good Watching",
            "url" : "http://goodwatching.com",
            "description" : "Weekend experiment to help my mom decide what to watch."    
        }
    };

    $scope.setProject = function (id) {
        $scope.currentProject = $scope.projects[id];
        console.log( $scope.currentProject );

    }
}

इस कोड के साथ, कुछ भी iframe की srcविशेषता में सम्मिलित नहीं होता है । यह सिर्फ कोरा है।

अद्यतन 1: मैंने $sceAppCtrl और $ sce.trustUrl () में निर्भरता को इंजेक्ट किया, अब त्रुटियों को फेंकने के बिना काम करता है। हालाँकि यह वापस आता है TrustedValueHolderTypeजो मुझे यकीन नहीं है कि वास्तविक URL डालने के लिए कैसे उपयोग किया जाए। उसी प्रकार को लौटाया जाता है कि क्या मैं विशेषता में प्रक्षेप ब्रेसिज़ के अंदर $ sce.trustUrl () का उपयोग करता हूं src="{{trustUrl(currentProjectUrl))}}"या यदि मैं currentProjectUrl का मान सेट करते समय नियंत्रक के अंदर करता हूं। मैंने भी दोनों के साथ कोशिश की।

अद्यतन 2: मुझे पता चला है कि .toString () का उपयोग करके कैसे विश्वसनीयUolder से url लौटाया जाए, लेकिन जब मैं ऐसा करता हूं, तो यह सुरक्षा चेतावनी को फेंक देता है जब मैं इसे src विशेषता में पारित करने का प्रयास करता हूं।

अद्यतन 3: यह काम करता है अगर मैं कंट्रोलर में TrustAsResourceUrl () का उपयोग करता हूं और इसे ng-src विशेषता के अंदर उपयोग किए जाने वाले चर में पास करता हूं:

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    console.log( $scope.currentProject );
    console.log( $scope.currentProjectUrl );

}

मेरी समस्या इससे हल होती दिख रही है, हालाँकि मुझे यकीन नहीं है कि क्यों।

Answer 1

मैं अंश को देखकर लगता है कि समारोह trustSrcसे trustSrc(currentProject.url)नियंत्रक में परिभाषित नहीं है।

आप इंजेक्षन करने की जरूरत है $sceसेवा नियंत्रक और में वहाँ।trustAsResourceUrlurl

नियंत्रक में:

function AppCtrl($scope, $sce) {
    // ...
    $scope.setProject = function (id) {
      $scope.currentProject = $scope.projects[id];
      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    }
}

टेम्प्लेट में:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

Comments

जैसा कि आपने सिफारिश की मैंने $ sce के साथ इसकी कोशिश की। यह त्रुटि संदेश को दूर करने का कारण बनता है, लेकिन iframe की src विशेषता अभी भी खाली है।

— एमर्सटाउनिस

प्रयोग करके देखें trustAsResourceUrl।

— मुश्लिक_नत

... लेकिन यह एक काम करता है जब मैं इसे एनजी-एसकेटी विशेषता में पास करता हूं! धन्यवाद।

— एमर्सोथिसिस

@ ईमरसन trustAsResourceUrlवह रिटर्न देता है $sce.RESOURCE_URLजिसकी आवश्यकता होती है iframe/ objectsजबकि trustAsUrlरिटर्न $sce.URLजो एक कमजोर प्रकार की गारंटी होती है (और वर्तमान में प्रलेखन के अनुसार अप्रयुक्त है )।

— मुशायरों में

ng-src ने मेरे लिए तब तक काम नहीं किया जब तक कि मैंने डबल घुंघराले ब्रेस को नहीं हटाया (ng-src = "currentProjectUrl")

— baacke

Answer 2

यह वह $sceसेवा है जो बाहरी डोमेन के साथ URL को ब्लॉक करती है, यह एक सेवा है जो सुरक्षा संबंधी कमजोरियों जैसे कि XSS, क्लिकजैकिंग, आदि को रोकने के लिए AngularJS को स्ट्रिक्ट कंसेक्चुअल एस्केलिंग सेवाएं प्रदान करती है, यह Angular 1.2 में डिफ़ॉल्ट रूप से सक्षम है।

आप इसे पूरी तरह से अक्षम कर सकते हैं, लेकिन यह अनुशंसित नहीं है

angular.module('myAppWithSceDisabledmyApp', [])
   .config(function($sceProvider) {
       $sceProvider.enabled(false);
   });

अधिक जानकारी के लिए https://docs.angularjs.org/api/ng/service/$sce

Answer 3

इस तरह मैं पालन करता हूं और मेरे लिए इसका काम ठीक है, हो सकता है कि यह आपके लिए काम करे,

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
                height: iframeHeight * 0.75 + 'px'
            }" style="width:100%"></iframe>

यहाँ विश्वास है कि यह सिर्फ फ़िल्टर है,

angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

Answer 4

कृपया trustSrcफ़ंक्शन को कॉल हटा दें और इस तरह से फिर से प्रयास करें। {{TrustSrc (currentProject.url)}} से {{currentProject.url}}। इस लिंक की जाँच करें http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p ।preview

---

लेकिन कोणीय जेएस 1.2 प्रलेखन के अनुसार, आपको srcयूआरएल प्राप्त करने के लिए एक फ़ंक्शन लिखना चाहिए । निम्नलिखित कोड पर एक नज़र है।

इससे पहले:

जावास्क्रिप्ट

scope.baseUrl = 'page';
scope.a = 1;
scope.b = 2;

एचटीएमएल

<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"

लेकिन सुरक्षा कारणों से वे निम्नलिखित विधि की सिफारिश कर रहे हैं

जावास्क्रिप्ट

var baseUrl = "page";
scope.getIframeSrc = function() {

  // One should think about their particular case and sanitize accordingly
  var qs = ["a", "b"].map(function(value, name) {
      return encodeURIComponent(name) + "=" +
             encodeURIComponent(value);
    }).join("&");

  // `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it.
  return baseUrl + "?" + qs;
};

एचटीएमएल

<iframe src="{{getIframeSrc()}}">

Comments

यदि यह एक ng-srcया एक से अधिक अभिव्यक्ति के लिए बाध्यकारी है तो प्रलेखन यह सलाह देता है src। कोणीय 1.2 के बाद से, एक में केवल एक ही अभिव्यक्ति के लिए बाध्य कर सकते हैं srcऔर ng-srcऔर सलाह यदि आवश्यक हो तो, एक समारोह का उपयोग कर संहिता से url प्राप्त करने में है।

— मुशायरों

लेकिन मुझे लगता है कि आपके कोड में कुछ गलती है। नियंत्रक इस app.controller ('AppCtrl', फ़ंक्शन ($ गुंजाइश) {}) की तरह होना चाहिए;

— साजिथ

नियंत्रकों के साथ-साथ विश्वव्यापी सुलभ कार्य भी हो सकते हैं ।

— मुसिलम_

ठीक। इस लिंक की जाँच करें मैंने प्लंकर के साथ आपका कोड चेक किया। plnkr.co/edit/caqS1jE9fpmMn5NofUve

— Sajith

मैंने आपके कोड में एक फ़ंक्शन "TrustSrc" देखा है। कृपया उस फ़ंक्शन को हटा दें और इस तरह से फिर से प्रयास करें। {{TrustSrc (currentProject.url)}} से {{currentProject.url}}

— साजिथ

Answer 5

टेम्पलेट का चयन करें; iframe कंट्रोलर, एनजी मॉडल अपडेट

index.html

angularapp.controller('FieldCtrl', function ($scope, $sce) {
        var iframeclass = '';
        $scope.loadTemplate = function() {
            if ($scope.template.length > 0) {
                // add iframe classs
                iframeclass = $scope.template.split('.')[0];
                iframe.classList.add(iframeclass);
                $scope.activeTemplate = $sce.trustAsResourceUrl($scope.template);
            } else {
                iframe.classList.remove(iframeclass);
            };
        };

    });
    // custom directive
    angularapp.directive('myChange', function() {
        return function(scope, element) {
            element.bind('input', function() {
                // the iframe function
                iframe.contentWindow.update({
                    name: element[0].name,
                    value: element[0].value
                });
            });
        };
    });

iframe.html

   window.update = function(data) {
        $scope.$apply(function() {
            $scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name];
        });
    };

इस लिंक को देखें: http://plnkr.co/edit/TGRj2o?p=preview

Answer 6

आपको $sce.trustAsResourceUrlयह भी चाहिए या यह iframe के अंदर वेबसाइट नहीं खोलेगा:

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {

    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');

    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="dummy">
    <iframe ng-src="{{url}}" width="300" height="200"></iframe>
    <br>
    <button ng-click="changeIt()">Change it</button>
</div>