Question

我正在尝试创建一个在点击时打开弹出视频的链接。到目前为止，我能够让它上班。但是，我想知道是否有办法将HTML和JS代码组合成1.这样，我就不必调用JS了。

HTML

<style>
.mfp-title {
position:absolute;
color: #FFF;
background: maroon;
}
</style>

<a class="video" title="Living the Mission, A Perspective from Residential Life Staff at Boston College" href="http://www.bc.edu/content/dam/files/offices/reslife/mov/Living%20the%20Mission%20%20A%20Perspective%20from%20Residential%20Life%20Staff%20at%20Boston%20College.mp4">Open video</a>

JS

$('.video').magnificPopup({
type: 'iframe',


iframe: {
 markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
            '<div class="mfp-title">Some caption</div>'+
          '</div>'
},
callbacks: {
markupParse: function(template, values, item) {
 values.title = item.el.attr('title');
}
}


});

如果不可能，我该如何调用JS文件。如果我做这样的事情

<script src="myScript.js"></script>

视频全屏显示，用户将转到其他页面。我不想让用户转到另一个页面。

任何帮助都将不胜感激。

Answer 1

我只是想知道我是否有办法让JS代码进入 HTML。而不是有2个不同的文件

是的，只需将其打包在<script>代码中，请检查此Javascript Where To

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
 <body>
  <a class="video" title="Living the Mission, A Perspective from Residential Life Staff at Boston College" href="http://www.bc.edu/content/dam/files/offices/reslife/mov/Living%20the%20Mission%20%20A%20Perspective%20from%20Residential%20Life%20Staff%20at%20Boston%20College.mp4">Open video</a>
  <script>
$('.video').magnificPopup({
type: 'iframe',
iframe: {
 markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen> </iframe>'+
            '<div class="mfp-title">Some caption</div>'+
          '</div>'
  },
     callbacks: {
      markupParse: function(template, values, item) {
      values.title = item.el.attr('title');
     }
   }
  });
 </script>
 </body>
</html>

第二种选择（良好做法）

您可以将css放入styles.css并将Js代码放入文件名myScript.js。

现在我创建了这个JSFiddle（希望这是你想要的。），因为Jsfiddle为你提供onDomReady选项，这就是html文档的外观。

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
 <body>
  <a class="video" title="Living the Mission, A Perspective from Residential Life Staff at Boston College" href="http://www.bc.edu/content/dam/files/offices/reslife/mov/Living%20the%20Mission%20%20A%20Perspective%20from%20Residential%20Life%20Staff%20at%20Boston%20College.mp4">Open video</a>
  <script src="myScript.js"></script>
 </body>
</html>

这样，html会首先加载<a>标记，稍后会加载.js脚本

你也可以使用$(document).ready（jQuery）作为@Austin Mullins的建议，但是对于这个例子，这是可以的。

希望你明白

将JS与HTML代码相结合

1 个答案: