Question

我是Javascript中的新手。我试图将一个div附加到正文，然后将一个iframe附加到div，即一个叠加层，我想加载一个视频。在IE10中，appendChild都不起作用。这两个元素都没有创建。在IE11中，创建了叠加层，但iframe却没有。

此外，在Chrome和IE11中，视频会在单独的标签中打开 - 而不是在叠加div中。我尝试了几种变化但没有成功。提前谢谢。

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<title>Events | NO</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script> 
$(document).ready(function(){
    var video = document.createElement("iframe");
    var overlay = document.createElement("div");
    $(".testimonial").click(function() {
    document.body.appendChild(overlay);
    $(overlay).addClass("overlay");
    overlay.appendChild(video);
    video.name = "iframe_a";
    video.width = "600px";
    video.height = "400px"; 
    $(video).addClass("youtube-player");
    $(".overlay").show();
    $(".youtube-player").show();

    }); 

});
</script>
<style>

.overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:1;
    z-index:50;
    color:#fff;
    display:none;
}

.youtube-player {
   left: 50%;  
   z-index:1000;
   width:600;
   height:400;
   display:none;
   left: 0; top: 0;
    height:0; width:0;
    border: none;

}
</style>

</head>

<body>

<h2>NFC Events</h2>



<div class="events" style="width: 75%;">
<h3>August 2015</h3>
   <h4>Katrina Remembrance Program</h4>
    <p style="width: 55%;">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
Blah Blah Blah Blah </p>

<ul>
<li><a class = "testimonial" href="https://www.youtube.com/embed/xJ0Z-ty61w0?wmode=opaque" 
target="iframe_a">Watch the video</a></li>

<li><a class = "testimonial" href="https://www.youtube.com/embed/rNM5HW13_O8?wmode=opaque" 
target="iframe_a">Watch the video</a></li>
</ul>


</div>
</body>
</html>

Answer 1

在我看来，你正在追加＆＃34;元素＆＃34;对象而不是对象的HTML。现在使用jQuery，你不需要outerHtml。您还需要阻止对代码的默认操作，以便它不会在新标签中启动。

$(".testimonial").on("click", function(e) {
    e.preventDefault();
    document.body.appendChild(overlay);
    $(video).prop("src",$(this).prop("href"));
    $(overlay).addClass("overlay");
    $(overlay).append(video);
    video.name = "iframe_a";
    video.width = "320px";
    video.height = "240px"; 
    $(video).addClass("youtube-player");
    $(".overlay").show();
    $(".youtube-player").show();
});

如果您需要更多详细信息，请与我们联系。例： https://jsfiddle.net/oor2pmhb/2/

将iframe和div附加到正文

1 个答案: