我正在尝试创建一个链接，单击时会打开弹出视频。到目前为止我能够让它工作。但是，我想知道是否有一种方法可以将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>
视频以全屏方式打开，用户将被带到不同的页面。我不想让用户转到另一个页面。
如有任何帮助，我们将不胜感激。
最佳答案
I am just wondering if there is a way for me to have the JS code in HTML. Instead of having 2 different files
是的，只需将其包裹在 <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 所建议的，但对于这个例子来说这是可以的。
希望你能明白
关于javascript - 将 JS 与 HTML 代码结合起来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29286534/