首页 文章

在AngularJS中嵌入Youtube视频会在加载页面时产生错误

提问于
浏览 次
0

下面的代码段用于在我的页面中嵌入Youtube视频 .

<div ng-if="videoUrl != ''" style="height:400px;">
    <iframe width="100%" height="100%" src="{{videoUrl}}"></iframe>
</div>

在我的控制器中， videoUrl 首先设置为空字符串，并在从服务器检索数据后更新 .

$scope.videoUrl = '';

videoService.getData().then(function(response) {
    $scope.videoUrl = response.videoUrl;
});

Youtube播放器工作，URL正确，我可以在页面完全加载后使用嵌入式播放器观看视频 . 困扰我的是每次加载页面时都会返回错误 . 我可以从浏览器控制台看到它试图将 GET 请求发送到 http://www.example.com/%7B%7BvideoUrl%7D%7D ，状态为 (canceled) . 这个请求不是我想要的，它肯定是失败的 .

我怎样才能摆脱那种奇怪的 GET 请求？

javascript angularjs iframe youtube

1 回答

  • 1

    我根据RGraham的建议修改了我的代码，错误现在消失了 .

    首先，将 src 更改为 ng-src ，将检查条件更改为 ng-if="videoUrl" .

    <div ng-if="videoUrl" style="height:400px;">
    <iframe width="100%" height="100%" ng-src="{{videoUrl}}"></iframe>
</div>

    其次，我将 videoUrl 初始化为 undefined .

    $scope.videoUrl = undefined;

    现在页面加载而不再发送先前奇怪的 GET 请求 .

    回复于

相关问题