दिलचस्प पोस्ट
एक्सएसडी से जेएसीएबी कक्षाएं कैसे उत्पन्न करें? जावा का उपयोग करके सिस्टम कमांड्स (लिनक्स / बीएसडी) कैसे निष्पादित करें I संरेखित करें-स्व, संरेखित-आइटम और संरेखित-सामग्री के साथ फ्लेक्स-रैप काम कैसे करता है? अधिकतम मूल्य एएसपी.नेट वेब एपीआई के साथ जेएसओएनपी कंसल्टेंसी इन्फ़ोरी में एनएसईटी के वर्तमान कल्चर और कंटेंट यूक कृषि गुणों के बीच अंतर क्या है? मैं लिनक्स में C ++ कोड को कैसे चल सकता हूं? std :: फ़ंक्शन बनाम टेम्पलेट Jquery – $ .post () कैसे करें contentType = application / json का उपयोग करें? नोडजेएस – एनपीएम के साथ स्थापित करने में त्रुटि रेगेक्स: मैच सब कुछ लेकिन वेब पेज के नीचे रहने के लिए आप पाद लेख कैसे प्राप्त कर सकते हैं? JQuery का उपयोग कर एक डिवेल में चेक चेकबॉक्स की एक सूची प्राप्त करें ये जावास्क्रिप्ट bitwise ऑपरेटर्स क्या करते हैं? प्रोटोटाइप-परिभाषित कार्यों से निजी सदस्य चर को एक्सेस करना

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

मैं एक आरएफ़ के src एट्रिब्यूट को एक चर से सेट करने का प्रयास कर रहा हूं और मुझे यह काम करने के लिए नहीं मिल सकता …

मार्कअप:

 <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: मैं AppCtrl और $ sce.trustUrl () में $sce निर्भरता को इंजेक्ट कर चुका हूं, अब त्रुटियों को फेंकने के बिना काम करता है। हालांकि यह TrustedValueHolderType जो मुझे यकीन नहीं है कि किसी वास्तविक URL को सम्मिलित करने के लिए कैसे उपयोग किया जाए। वही प्रकार लौटाया गया है, क्या मैं attpr src="{{trustUrl(currentProjectUrl))}}" में प्रक्षेप ब्रेज़ के अंदर $ sce.trustUrl () का उपयोग करता हूं या अगर मैं src="{{trustUrl(currentProjectUrl))}}" के मान सेट करते समय नियंत्रक के अंदर करता हूं। मैंने दोनों के साथ भी कोशिश की

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

3 अद्यतन: यह काम करता है अगर मैं नियंत्रक में trustAsResourceUrl () का उपयोग करता हूं और एनजी-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 ); } 

मेरी समस्या यह हल हो रही है, हालांकि मुझे पूरा यकीन नहीं है कि क्यों

वेब के समाधान से एकत्रित समाधान "AngularJS में एक चर से iframe src विशेषता को कैसे सेट करें"

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

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

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

 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> 

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

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

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

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

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


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

पहले:

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

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

टेम्पलेट का चयन करें; 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