Question

我正在使用Chrome扩展程序，该扩展程序使用iframe.ly API从用户当前所在页面上的视频中获取响应式iframe标记。我使用Angular JS（v1.5.8）与API通信，并生成iframe标记的预览。如果在YouTube页面上使用扩展程序，那么所有内容都会非常出色。这是基本流程：

内容脚本＆lt; - 抓取当前网址

chrome.runtime.sendMessage({
  theurl: window.location.href 
});

后台脚本＆lt; - 将当前网址放入为API调用创建的网址：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse){
       localStorage["theurl"] = request.theurl;
    }
);

var url = "http://iframe.ly/api/iframely?url=" 
+ localStorage["theurl"] + "&api_key=**my api key, to be removed in production**>";

stuff.js ＆lt; - 没有大名，但是调用的Angular位：

var iframeApp = angular.module('iframeApp', ['ngSanitize']);

iframeApp.controller('linkCtrl', function($scope, $http) {
    $http.get(url).success(function(data) {
     $scope.iframe = data;

      }); 
    });

 iframeApp.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

    iframeApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

sandboxed.html ＆lt; - 再次，没有太大的名称（从我尝试使用此扩展程序的其他方法时剩下的），但是点击浏览器图标时的默认弹出窗口：

   <html class="ng-scope" ng-csp ng-app="iframeApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="angular.min.js"></script>
  <script src="angular-sanitize.min.js"></script>
  <script src="backgroundscript.js"></script>
  <script src="stuff.js"></script>
  </head>

<body ng-controller="linkCtrl">
  <h4>Responsive iFrame code is <pre>{{iframe.links.player[0].html}}</pre></h4> 

<div ng-bind-html="iframe.links.player[0].html | rawHtml"></div>
  </body>

</body>

</html>

现在！在YouTube页面上（例如），单击浏览器图标时会发生这种情况：

奇妙！但！当我在Vimeo页面上尝试进行相同的调用时，事情变得有点，嗯，根本不工作。问题在于：对YouTube页面的iframe.ly API调用上的源网址会返回附加了https协议的网址。但是，Vimeo调用返回一个非亲属的URL，＆＃34; //＆＃34;附加到源的协议。所以，这种情况发生了，因为除非您在某种服务器上运行的HTML文件上执行此操作，否则显然无法工作，因为它会尝试访问本地文件：< / p>

现在，我想通过调用源网址（通过将iframe.links.player[0].html替换为iframe.links.player[0].href）然后将其放入硬编码的响应div元素内的iframe来解决此问题。这样，我的电话会回来，比如//player.vimeo.com/video/177375994?byline=0&badge=0&portrait=0&title=0。

那么，我如何从API调用中删除URL中的所有协议？这将是很好的，因为player.vimeo.com/video/177375994?byline=0&badge=0&portrait=0&title=0会自动路由浏览器以附加正确的协议，而不是让我认为我试图加载本地文件，并且它会在那里做同样的事情。 YouTube网址上没有协议，我也假设视频还有其他任何网址。

扩展程序的功能是允许开发人员快速复制/粘贴iframe标记，而不必输入，只是为了让事情变得更轻松。所以，＆＃34; //＆＃34;从长远来看，如果正在构建一个站点，协议实际上是正常的，因为它在服务器上运行，并不重要。但是，为了不看起来丑陋，如果预览适用于所有带扩展名的视频，那就不错了。

谢谢！

Answer 1

如果您正在使用Angular处理扩展程序或应用程序，并且您正在与您无法控制的公共API进行通信，并且该API会让您对某些内容产生影响不需要的人物反应：永远不要害怕！

我成功地从get请求返回的URL中提取了协议，但在意识到没有协议的URL也被视为本地文件之后，我添加了一个＆＃34; http：//＆＃ 34;剥离后的URL协议。这样，iframe.ly API中的任何Vimeo源都具有＆＃34; //＆＃34;的协议。将替换为＆＃34; http：//＆＃34;，最终将其重定向到＆＃34; https：//＆＃34;无论如何，协议似乎是安全的＃http; //＆＃34;在任何事情上都有你的基础，因为，至少在Chrome中，它足以路由到任何受SSL保护的东西）。

所以，基本上，问题是iframe.ly API非常适合查找视频的源URL，但协议没有规范化，这在尝试在chrome扩展程序中使用这些URL时会出现问题。以下是我目前用于从API中提取网址的代码，然后将其协议规范化为＆＃34; http：//＆＃34;：

在命名不佳的stuff.js中，扩展的Angular代码存在于其中：

var iframeApp = angular.module('iframeApp', ['ngSanitize']);

iframeApp.controller('linkCtrl', function($scope, $http, $sce) {
    $http.get(url).success(function(data) {
     $scope.iframe = data;

     var newurl = $scope.iframe.links.player[0].href;
    var secondurl = newurl.split('/').slice(2).join('/');
    $scope.iframe2 = $sce.trustAsResourceUrl((secondurl.indexOf('://') == -1) ? 'http://' + secondurl : secondurl) ;

     var testurl = $scope.iframe.links.player[0].href;
     $scope.iframe3 = testurl;

     $scope.iframe3 = $sce.trustAsResourceUrl(testurl);

      });

    });

 iframeApp.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

    iframeApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

而且，在名称也很差的sandboxed.html中，这是扩展程序的默认弹出窗口：

<html class="ng-scope" ng-csp ng-app="iframeApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="angular.min.js"></script>
  <script src="angular-sanitize.min.js"></script>
  <script src="backgroundscript.js"></script>
  <script src="stuff.js"></script>
  </head>

<body ng-controller="linkCtrl">
  <h4>Responsive iFrame: <pre><code>&lt;div style=&quot;left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;&quot;&gt;&lt;iframe src=&quot;{{iframe2}}&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; mozallowfullscreen=&quot;true&quot; style=&quot;top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;</code></pre>


<div>Source URL is: <code>{{iframe2}}</code></div>


<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;"><iframe ng-src="{{iframe2}}" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
  </body>


</html>

现在，单击Vimeo视频页面上的浏览器操作图标将不会返回我厌恶的悲伤脸部图形，所以过去几周非常多：

而且，如果我将源URL复制/粘贴到浏览器中，我们可以看到它会自动路由＆＃34; http：//＆＃34;协议到它的合法性＆＃34; https：//＆＃34;协议：

而且，只是为了好玩，一个html页面填充了从默认弹出窗口的Responsive iFrame Code部分复制/粘贴的东西：

在本地打开文件时给我们这个：

我有一种感觉，任何AngularJS纯粹主义者都在看这个代码并大声喊叫＆＃34; NO NO NO NO NO＆＃34;在他们的屏幕上，因为，即使作为一个n00b，我也很确定这个Angular代码是丑陋的，应该分成不同的部分。但！正在工作，我很乐意听到任何关于以更合适的方式实现这一目标的建议。＆＃34; Angular Way＆＃34; :)

如何从Angular $ http中删除url协议获取响应

1 个答案: