Ich arbeite an einer Chrome-Erweiterung, die die iframe.ly-API verwendet, um das responsive iframe-Markup von einem Video auf der Seite zu erfassen, auf der sich der Benutzer gerade befindet. Ich verwende Angular JS (v1.5.8), um mit der API zu kommunizieren und eine Vorschau des iFrame-Markups zu generieren. Alles funktioniert prächtig, wenn die Erweiterung auf einer YouTube-Seite verwendet wird. Hier ist der grundlegende Ablauf:
Content-Skript < - greift aktuelle URL
chrome.runtime.sendMessage({
theurl: window.location.href
});
Hintergrund Skript < - setzt aktuelle URL in url für den API-Aufruf gemacht:
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 < - nicht sehr benannt, aber das Winkelstück, das th macht e Aufruf:
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 < - wieder, nicht stark genannt (Überbleibsel aus, als ich für diese Erweiterung einen anderen Ansatz versuchen), aber der Standard-Popup, wenn Browser-Symbol geklickt wird:
<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>
Jetzt! Auf einer YouTube-Seite (zum Beispiel), ist es das, was passiert, wenn das Browser-Symbol geklickt wird:
Wonderful! ABER! Die Dinge werden ein bisschen, ähm, überhaupt nicht funktionieren, wenn ich versuche, denselben Anruf auf einer Vimeo-Seite zu machen. Hier ist das Problem: Die Quell-URL des iframe.ly-API-Aufrufs an eine YouTube-Seite gibt eine URL zurück, die an ein https-Protokoll angehängt ist. Ein Vimeo-Aufruf gibt jedoch eine URL mit einem nicht relativen "//" - Protokoll zurück, das an die Quelle angehängt wird. Also, dies geschieht, weil offensichtlich wird dies nicht funktionieren, wenn Sie es auf einer HTML-Datei tun, die auf einem Server von einer Art ausgeführt wird, weil es sonst eine lokale Datei zuzugreifen versucht:
Nun möchte ich das beheben, indem ich die Quell-URL anrufe (indem ich die iframe.links.player[0].html durch iframe.links.player[0].href ersetze) und diese dann in einen Iframe innerhalb eines hartkodierten responsiven div-Elements setze. Auf diese Weise würde mein Anruf zurückkehren, sagen //player.vimeo.com/video/177375994?byline=0&badge=0&portrait=0&title=0.
Also, wie könnte ich alle Protokolle von den URLs von den API-Aufrufen entfernen? Das wäre großartig, denn player.vimeo.com/video/177375994?byline=0&badge=0&portrait=0&title=0 routet den Browser automatisch, um das richtige Protokoll anzuhängen, anstatt zu denken, dass ich versuche, eine lokale Datei zu laden, und es macht dasselbe, wenn es kein Protokoll auf einer YouTube-URL gibt. Ich nehme auch eine andere URL für ein Video an.
Die Funktionalität der Erweiterung ist es, einem Entwickler zu ermöglichen, iFrame-Markup schnell zu kopieren/einzufügen, anstatt es eingeben zu müssen, nur um die Dinge ein wenig einfacher zu machen. Das "//" -Protokoll wäre also auf lange Sicht in Ordnung, wenn eine Site erstellt wird, weil sie dann auf einem Server läuft, und das spielt keine Rolle. Aber um nicht hässlich auszusehen, wäre es schön, wenn die Vorschau für alle Videos mit der Erweiterung funktioniert.
Vielen Dank!
ich den zusätzlichen Code zu dem Modul hinzugefügt: 'iframeApp.controller (‚linkCtrl‘ , Funktion ($ scope, $ http) { $ http.get (url) .success (Funktion (Daten)) { $ scope.iframe = Daten; var newurl = $ scope.iframe.links.player [0]. href; $ scope.iframe2 = newurl.replace (/^https?\:\/\//ich, ""); }); }); ' In sandboxed.html'
Mit anderen Worten, ich frage mich, ob die beste Möglichkeit sein könnte, $ scope.iframe.links.player [0] .href als Variable zu speichern, dann entferne das Protokoll bei diesem Schritt und deklariere dann einen neuen Bereich für die Variable, nachdem das Protokoll entfernt wurde. Aber ich vermisse etwas, weil ich denken würde, dass der obige Code funktionieren würde, wenn diese Avenue Potenzial hätte. – sparkholiday