Question

我在旧电脑上安装了一个网络服务器，它只是站在一边，可以在本地网络中访问电影。我已经写了一个php脚本来显示该文件夹中的所有电影（所以我不必记下每一个电影并一直更新），但这不是真正用户友好的。

我想在下面有一个带有iframe的下拉菜单，每次更改下拉菜单中的选项时，iframe都会显示新电影。

我的代码到现在为止：

var svgElement = document.querySelector('.design-review-container');

var asImage = function(svgString) {

  var drawImage = function(ctx, img, x, y, width, height, deg, flip) {
    //save current context before applying transformations
    ctx.save();
    //convert degrees to radians
    if (flip) {
      var rad = deg * Math.PI / 180;
    } else {
      var rad = 2 * Math.PI - deg * Math.PI / 180;
    }
    //set the origin to the center of the image
    ctx.translate(x + width / 2, y + height / 2);
    //rotate the canvas around the origin
    ctx.rotate(rad);
    if (flip) {
      //flip the canvas
      ctx.scale(-1, 1);
    }
    //draw the image    
    ctx.drawImage(img, -width / 2, -height / 2, width, height);
    //restore the canvas
    ctx.restore();
  }

  var canvas = document.createElement("canvas");

  var bounds = {
    width: parseInt(svgElement.getAttribute('width')),
    height: parseInt(svgElement.getAttribute('height'))
  };

  var ht = bounds.height;
  var wd = bounds.width;

  canvas.setAttribute('width', wd);
  canvas.setAttribute('height', ht);

  var context = canvas.getContext('2d');
  context.imageSmoothingEnabled = false;

  return new Promise(function(resolve, reject) {
    var image = new Image();
    document.body.appendChild(image);
    image.onload = function() {
      drawImage(context, image, 0, 0, wd, ht, 180, true);
      resolve(canvas.toDataURL('image/png'));
    };
    image.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgString);
  });

};

var xmlSerializer = new XMLSerializer();
var svgString = xmlSerializer.serializeToString(svgElement);
asImage(svgString).then(function(src) {
  svgElement.parentNode.removeChild(svgElement);
  var image = new Image();
  document.body.appendChild(image);
  image.src = src;
});

但遗憾的是它不起作用，我找不到我的错误。当我改变所选的电影时，似乎什么也没发生。

感谢您的每一个有用的答案， Twisterado

Answer 1

正确关闭iframe标记以使html有效并使用这样的函数声明语法。

function mvsrcchange()

或

var mvsrcchange = function()

＆＃13;

<div>
<form>
<select id="movielist" onchange="mvsrcchange();">
<option value="../Filme/Film 1.mp4">Film 1</option>
<option value="../Filme/Film 2.m4v">Film 2</option>
<!-- usw -->
</select>
</form>
<iframe id="mvframe" src="" width="960" height="400" frameborder="0"></iframe>
</div>

<script>
var mvform = document.getElementById("movielist");
		
function mvsrcchange(){
	var mvsrc = mvform.options[mvform.selectedIndex].value;
	var address = mvsrc;
	document.getElementById('mvframe').src = address;
}
</script>

＆＃13;

通过onchhange调用Javascript函数来更改src属性

1 个答案: