iframe src不工作

ljo96ir5  于 2021-06-20  发布在  Mysql
关注(0)|答案(1)|浏览(323)

我正在尝试从mysql中使用php检索youtube链接,并将其嵌入带有angularjs的网页中。问题是除了iframe之外,所有其他数据都显示在网页上。正如您在下面我的代码视图中看到的,我已经在网页上显示了post.src。链接正是我所期望的。但是,当我尝试嵌入它并尝试在iframe source中使用{post.src}}传递链接时,它不会显示任何内容,但会按照iframe width和height的指示留出一些空间。
有什么想法吗???

  1. <!-- HTML content -->
  2. <body ng-app="myApp">
  3. <div ng-controller="videoControl">
  4. <table>
  5. <tr ng-repeat="post in posts">
  6. <td>{{ post.postType }}</td>
  7. <td>{{ post.postTitle }}</td>
  8. <td>{{ post.postDescription }}</td>
  9. <td>{{ post.postDate }}</td>
  10. <td>{{ post.src }} </td>
  11. <td>
  12. <iframe width='560' height='315' ng-src='{{ post.src }}' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
  13. </td>
  14. </tr>
  15. </table>
  16. </div>
  17. <!-- module -->
  18. var app = angular.module("myApp", ["ngRoute"]);
  19. <!-- controller -->
  20. app.controller('videoControl', function($scope, $http) {
  21. $http.get("pages/db_section/videos.php")
  22. .then(function (response) {
  23. $scope.posts = response.data.records;
  24. });
  25. });
  26. <!-- videos.php -->
  27. <?php
  28. include 'db.php';
  29. connection();
  30. $sql = "SELECT * FROM feed WHERE post_type='video' ORDER BY time DESC";
  31. $result = $conn->query($sql);
  32. $outp = "";
  33. while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
  34. if ($outp != "") {$outp .= ",";}
  35. $source = str_replace("watch?v=","embed/",$rs["src"]);
  36. $outp .= '{"postType":"' . $rs["post_type"] . '",';
  37. $outp .= '"postDate":"' . $rs["time"] . '",';
  38. $outp .= '"postTitle":"' . $rs["post_title"] . '",';
  39. $outp .= '"src":"' . $source . '",';
  40. $outp .= '"postDescription":"'. $rs["post_description"] . '"}';
  41. }
  42. $outp ='{"records":['.$outp.']}';
  43. connectionClose();
  44. echo($outp);
  45. ?>
nom7f22z

nom7f22z1#

您需要使用一个过滤器,其中'post.src'是iframe的url,'trustasresourceurl'是过滤器并已定义

  1. angular.module('myApp', [])
  2. .filter('trustAsResourceUrl', ['$sce', function($sce) {
  3. return function(val) {
  4. return $sce.trustAsResourceUrl(val);
  5. };
  6. }])

和html

  1. <iframe width='560' height='315' ng-src='{{ post.src | trustAsResourceUrl}}' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>

相关问题