GVKun编程网logo

如何从 AngularJS 中的变量设置 iframe src 属性（angularjs变量间赋值）

23

本文将带您了解关于如何从AngularJS中的变量设置iframesrc属性的新内容，同时我们还将为您解释angularjs变量间赋值的相关知识，另外，我们还将为您提供关于angular-使用ifra

本文将带您了解关于如何从 AngularJS 中的变量设置 iframe src 属性的新内容，同时我们还将为您解释angularjs变量间赋值的相关知识，另外，我们还将为您提供关于angular-使用iframe做独立页（iframe传值到angular和iframe里请求后台数据）、AngularJS iframe跨域打开内容时报错误的解决办法_AngularJS、AngularJS postmessage iframe、angularjs – Angular 1.2：ng-bind-html删除img上的src属性的实用信息。

本文目录一览：

如何从 AngularJS 中的变量设置 iframe src 属性（angularjs变量间赋值）

如何从 AngularJS 中的变量设置 iframe src 属性（angularjs变量间赋值）

我正在尝试src从变量设置 iframe 的属性，但我无法让它工作......

标记：

<divng-controller="AppCtrl">    <ul>        <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 );    }}

src使用此代码，iframe 的属性中不会插入任何内容。它只是空白。

更新 1： 我将$sce依赖项注入 AppCtrl 和 $sce.trustUrl()
现在可以正常工作而不会引发错误。但是它会返回TrustedValueHolderType，我不确定如何使用它来插入实际的
URL。无论我在属性的插值括号内使用
$sce.trustUrl()src="{{trustUrl(currentProjectUrl))}}"还是在设置 currentProjectUrl
的值时在控制器内执行此操作，都会返回相同的类型。我什至都试过了。

更新 2： 我想出了如何使用 .toString() 从trustedUrlHolder 返回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 );}

我的问题似乎由此解决了，虽然我不太清楚为什么。

答案1

小编典典

我怀疑查看控制器中未定义函数的trustSrc摘录。trustSrc(currentProject.url)

您需要在控制器和那里注入$sce服务。trustAsResourceUrl``url

在控制器中：

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>

angular-使用iframe做独立页（iframe传值到angular和iframe里请求后台数据）

angular-使用iframe做独立页（iframe传值到angular和iframe里请求后台数据）

这个方法使用过两次。一次是在项目中嵌入一个表达式生成器。因为用别人做好的网页变成组件很难，而且里面用了jq，与angular思想相反不能用。另一次是因为想要单独引用样式。而innerHTML使用的样式放在组件css里不生效。放在assets里又影响全局样式。所以使用iframe。

第一种是在iframe页中获取我需要的值传回angular页。另一种是将后台请求参数传向iframe页。在iframe引用的页中请求并返回后台数据用innerHTML展示。

两种都先链接到iframe并传参。首先iframe引用的网页要放在assets资源文件夹里。才能够通过路径访问。首先把要引用网站的html，css放在资源文件夹里。

其次，在angular组件中用路径链接到网页。并根据需要传参数。angular中默认这路径是不安全的。我们需要DomSanitizer告诉它这是个安全路径。如果没使用会报一个提示不安全路径错吧。现在错误我懒得重现。注意的是用innerHTML引用样式时也用类似的方法。直接截图方法。

ts文件方法

分享图片

HTML里的 写法：

分享图片

这样链接已经完成了。链接的页要接受参数是怎么做呢，直接上代码,粘贴这串代码就可以获取传过来的所有参数，拿到对应参数格式是Request[‘参数名‘]

function request(url) {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}

var Request = new Object();
Request = request();
alert(Request[‘url‘],Request[‘token‘],Request[‘queuename‘]); //拿到对应的参数Request[‘参数名‘]（这里和上面的传参是两个页。不对应）
 
 第一种：从iframe页里传数据到angular页。

分享图片
 
 

分享图片

 第二种：

拿到参数后请求后台数据，并使angular里的父容器自适应iframe里网页长度的方法是

分享图片

AngularJS iframe跨域打开内容时报错误的解决办法_AngularJS

AngularJS iframe跨域打开内容时报错误的解决办法_AngularJS

打开不同域的内容时报下面的错误:

Blocked loading resource from url not allowed by $sceDelegate policy

解决方案：

复制代码 代码如下:

app.config(function($sceDelegateProvider) {
   $sceDelegateProvider.resourceUrlWhitelist([
       // Allow same origin resource loads.
       ''self'',
       // Allow loading from our assets domain.  Notice the difference between * and **.
       ''http://media.w3.org/**'']);
});

很简单的方法就解决了angularjs跨域使用iframe的问题，希望大家能够喜欢

AngularJS postmessage iframe

AngularJS postmessage iframe

我正在寻找一种方法来获取iframe contentwindow对象,并在用户的某些操作后向其发布消息.我目前的解决方案根本没有角度感觉(特别是从控制器访问DOM).

我创建了一个说明问题的plunker：
http://plnkr.co/edit/aXh4jydWGWfK3QQD4edd

执行postMessage是一种更有棱角的方式吗？

控制器：

app.controller('Main',function($scope) {
  $scope.click = function() {
    var iframe = document.getElementById("inner").contentwindow;

    iframe.postMessage("Hello iframe",'*');
  }
});

HTML：

<body ng-controller="Main">
    <button ng-click="click()">send message</button>

    <iframe id="inner" src="inner.html"/>
  </body>
我知道你的问题已经超过一年了,但我最近有类似的需求,所以我想我会发布我的解决方案.最初我有像你发布的东西,但正如你所指出的那样,这并不是非常“有角度”.它也不容易测试,我认为它也不是非常“Angular”.

相反,我重构了我的代码以将iframe实现为指令.然后我从app的控制器发出$broadcast()事件并让指令听取它们.这段代码可能会有相当多的改进,但它感觉更加“Angular”,并避免直接触及DOM.

'use strict';

angular.module('app')
    .directive('angularIframe',['$rootScope',function($rootScope) {

        return {
            restrict: 'E',replace: true,template: '<iframe id="game" src="/iframe/index.html" width="100%" height="100%" frameboarder="0" scrolling="no"></iframe>',link: function(scope,elem) {

                var off = $rootScope.$on('app.postmessage',function(ev,data,targetorigin) {

                    var str = JSON.stringify(data);
                    targetorigin = targetorigin || '*';
                    elem[0].contentwindow.postMessage(str,targetorigin);

                });

                // See: https://stackoverflow.com/a/14898795/608884
                elem.on('$destroy',function() {
                    off();
                });

            }
        };
    }]);

然后,您可以通过添加< game>< / game>来使用此指令.你应用程序中的某个地方.

在控制器中,您现在可以广播app.postmessage事件以及一些数据来调用iframe上的postMessage()：

var myData = { foo: 'bar' };
$rootScope.$broadcast('app.postmessage',myData);

angularjs – Angular 1.2：ng-bind-html删除img上的src属性

angularjs – Angular 1.2：ng-bind-html删除img上的src属性

我在客户端使用Angular(1.2 RC2)开发CMS驱动的网站.由于内容来自CMS,我不幸被迫在 JSON字符串中使用接收HTML.大多数HTML都被注入并渲染得很好,但是图像标签的src被剥离了.从我读到的src应该以“unsafe：”为前缀,如果这是Angular中的XSS安全问题,则不会完全删除..但我可能会弄错.

我已经在这个问题上待了一段时间,感觉我已经尝试了从合理到彻头彻尾的愚蠢的一切.将我的CMS网址列入白名单,将所有内容列入白名单,禁用$sce,强制html通过$sce.trustAsHtml()并且好……到目前为止,没有运气.由于该网站是CMS驱动的,我不幸的是不能创造一个掠夺者/小提琴,但我希望一个善良的灵魂无论如何都会尝试帮助.

更新：忘记提到我也尝试过ng-src,效果相同.
更新II：如果我使用HTTPS,则src属性仍然存在并显示图像.这是可以接受的,因为它将在生产中的HTTPS上运行,但我仍然想知道为什么禁用$sce不起作用.

浏览器看到的HTML(slide.body的内容)

<div>
    <div>
        <img alt="none">
    </div>
    <div>
        <div>
             <h1>Sulvat Quis 1</h1>

             <h2>– Nullam dictum ac enim</h2>

        </div>
        <p>Proin quis justo vel felis varius soDales sit amet ut diam.</p>
    </div>
</div>

JADE(HTML)

.my-carousel(ng-controller='CarouselCtrl')
    carousel(interval='myInterval')
        slide(ng-repeat='slide in slides',active='slide.active')
            .my-carousel-item(ng-bind-html='slide.body')

角度控制器

.controller('CarouselCtrl',['$sce','Article','$scope',function($sce,Article,$scope) {
        $scope.myInterval = -1;
        $scope.slides = Article.query(
            {category: 'carousel'},function(data){
                for (var i = 0; i < data.length; i++) {
                    $scope.slides[i].body = $sce.trustAsHtml(data[i].body);                     
                }
            },function() {
                // Fail
            });
    }])

示例JSON响应(幻灯片)
抱歉宽盒子,没有设法格式化它.

{
"cmarId": 16,"corp": {
    "corpId": 2,"guiSelected": false
},"createdAt": "Sep 27,2013","articleTag": "slide-1","headline": "Slide 1","highlighted": false,"body": "
  

  

   
  \r\n 
 
   

     \r\n 
    
 
     
 
    
\r\n 
    

      \r\n 
     

       \r\n 
      
Sulvat Quis 1
\r\n 
      
– Nullam dictum ac enim
\r\n 
     
\r\n 
     
Proin quis justo vel felis varius soDales sit amet ut diam. Fusce auctor sapien nec purus sagittis,in venenatis turpis luctus. Nullam dictum ac enim sed commodo. Vivamus et placerat sapien.
\r\n 
    
\r\n 
   
\r\n 

  
","articlePriority": 0,"category": {
    "cmcaId": 9,"corp": {
        "corpId": 2,"guiSelected": false
    },"name": "carousel","visibleInMenu": false
},"published": true

}

你在这里遗失的作品是通过$sce.trustAsResourceURL();来信任图片网址.有关文档,请参见 here.

编辑：此外,它似乎你没有将ng-src值包装在引号中(以及它作为HTML属性所需的引号).这不起作用 – ng-src期望一个javascript字符串作为表达式的最终结果,并且你为它提供了一个无效的javascript文字.

今天关于如何从 AngularJS 中的变量设置 iframe src 属性和angularjs变量间赋值的讲解已经结束，谢谢您的阅读，如果想了解更多关于angular-使用iframe做独立页（iframe传值到angular和iframe里请求后台数据）、AngularJS iframe跨域打开内容时报错误的解决办法_AngularJS、AngularJS postmessage iframe、angularjs – Angular 1.2：ng-bind-html删除img上的src属性的相关知识，请在本站搜索。

本文标签：

上一篇Sass 中的 :after 和 :before 伪元素选择器

下一篇如何使用命令提示符 (cmd) 在 Windows 中列出文件。我试过在 Linux 中使用“ls”，但它显示错误？

相关文章