iframe.ly APIを使用して、ユーザーが現在いるページの動画からレスポンシブなiframeマークアップを取得するChrome拡張機能を開発中です。私はAngular JS（v1.5.8）を使用してAPIと通信し、iframeマークアップのプレビューを生成しています。拡張機能がYouTubeページで使用されている場合、すべてがうまく機能しています。
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**>";
chrome.runtime.sendMessage({
theurl: window.location.href
});
現在のURLをつかむ背景スクリプト <は、API呼び出しのために作られたURLに現在のURLを入れ
コンテンツスクリプト <：ここでは基本的な流れです
stuff.js < - それほど大きくはありませんが、 Eコール：
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 < - 再び、大幅に（残り私はこの拡張のために異なるアプローチをしようとしていたときから）、ブラウザのアイコンがクリックされた場合、デフォルトのポップアップ名前が付けられていない。
<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呼び出しのソースURLは、httpsプロトコルが追加されたURLを返します。しかし、Vimeo呼び出しは、非相対的な "//"プロトコルをソースに付加したURLを返します。
：あなたはいくつかの種類のサーバーで実行されているHTMLファイルでそれをやっている場合を除き、それはそうでない場合は、ローカルファイルにアクセスしようとするため、明らかに、これは、動作しませんので、だから、これは、起こりますさて、私はソースURL（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 URLにプロトコルがない場合でも同じことをするので、これは素晴らしいことです。他のURLも同様に仮定しています。
拡張機能は、開発者がiframeマークアップをすばやく簡単にコピーできるようにするためです。したがって、サイトが構築されている場合、「//」プロトコルは長期的にはうまくいくでしょう。なぜなら、それはサーバー上で実行されているからで、問題ではないからです。しかし、醜く見えないようにするためには、プレビューが拡張子の付いたすべての動画に適用された方がいいでしょう。
ありがとうございました！
、function（$ scope、$ http）{ $ http.get（url）.success（function（data）{ $ scope.iframe = data; var newurl = $ scope.iframe.links.player [0]。 href; $ scope.iframe2 = newurl.replace（/^https？\：\/\//私、 ""）; }）; }）; sandboxed.htmlの「
言い換えれば、$ scope.iframe.links.player [0] .hrefを変数として保存してから、そのステップでプロトコルを削除して新しいスコープを宣言するのが最善の方法かもしれないと思いますプロトコルが削除された後の変数。しかし、私は何かが欠けている。なぜなら、もしこの道が潜在的であれば、上記のコードがうまくいくと思うからだ。 – sparkholiday