边缘中的Javascript getAttribute

Question

我正在尝试加载视频后，页面完成加载。我使用的脚本可以在firefox和chrome中工作，但在Edge/IE中会抛出错误。错误是SCRIPT5007: Unable to get property 'append‘of undefined or null reference我在完整的构建中得到了它，它指示的行是iframe.id = vn.getAttribute('youtube')；问题是它没有将iframe添加到页面，所以没有视频。codepen上的错误无法获取未定义引用或null引用的属性'src‘，因为未将iframe追加到页面。这是我目前使用的html/js。我尝试了一些变体，比如vn.attr()。我尝试将其更改为data-youtube并使用vn.dataset.youtube。在Edge中似乎什么都不起作用。

codepen working on ff/chrome

<section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
<section data-grid="container">
    <ul role="tablist">
        <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
<span>Skyworld</span>
                </a>
            </li>
        <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">

                <span>SteamVR</span>
            </a>
        </li>
        <li class="c-glyph" role="presentation">
            <a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">

                <span>SUPERHOT VR</span>
            </a>
        </li>           
        <li class="c-glyph" role="presentation">
            <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">

                <span>Free the Night</span>
            </a>
        </li>
        <li class="c-glyph" role="presentation">
            <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">

                <span>Minecraft</span>
            </a>
        </li>
    </ul>
    <ul id="m-multi-description">
        <li id="newIconItemContent13" role="tabpanel" class="f-active">
            <h4 class="c-heading-10">VERTIGO GAMES</h4>
                <h3 class="c-heading">Skyworld</h3>
                <p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
            </li>
        <li id="newIconItemContent11" role="tabpanel" >
            <!-- <h4 class="c-heading-10">Microsoft</h4> -->
            <h3 class="c-heading">Steam®VR</h3>
            <p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
        </li>
        <li id="newIconItemContent12" role="tabpanel">
            <h4 class="c-heading-10">SUPERHOT TEAM</h4>
            <h3 class="c-heading">SUPERHOT VR</h3>
            <p>
            The iconic VR FPS is here; time moves only when you do.
            </p>
        </li>

        <li id="newIconItemContent14" role="tabpanel">
            <h4 class="c-heading-10">JAUNT</h4>   
            <h3 class="c-heading">Free the Night</h3>
            <p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
        </li>
        <li id="newIconItemContent15" role="tabpanel">
            <h4 class="c-heading-10">MICROSOFT</h4>
            <h3 class="c-heading">Minecraft</h3>
            <p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
        </li>
    </ul>
    <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
        <div class="background-skew"></div>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul>
                <li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
                        <picture class="c-image">
                            <source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
                            <source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
                            <source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
                            <source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
                            <source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
                            <source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
                            <img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
                    </li>
                    <div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
                        <div class="lightbox-container">  
                            <div class="lightbox-content">


                                <div class="video-container  youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
                                    <!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                </div>      

                            </div>
                        </div>
                        <button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
                                </button>
                    </div>
                <li id="newIconItemImage11" data-f-theme="light"  role="tabpanel">
                    <picture class="c-image">
                        <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
                        <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
                        <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
                        <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
                        <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
                        <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
                        <img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
                </li>
                <div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
                        <div class="lightbox-container">  
                            <div class="lightbox-content">


                                <div class="video-container  youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
                                    <!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                </div>      

                            </div>
                        </div>
                        <button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">

                                </button>
                    </div>
                <li id="newIconItemImage12" data-f-theme="light"  role="tabpanel">
                    <picture class="c-image">
                        <source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
                        <source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
                        <source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
                        <source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
                        <source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
                        <source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
                        <img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                        <a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
                </li>

                <div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
                        <div class="lightbox-container">  
                            <div class="lightbox-content">


                                <div class="video-container  youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
                                    <!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                </div>      

                            </div>
                        </div>
                        <button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">

                                </button>
                    </div>


                <li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
                <picture class="c-image">
                    <source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
                        <source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
                        <source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
                        <source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
                        <source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
                        <source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
                        <img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
                </li>
                <div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
                    <div class="lightbox-container">  
                        <div class="lightbox-content">


                            <div class="video-container  youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
                                <!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                            </div>      

                        </div>
                    </div>
                    <button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
                            </button>
                </div>
                <li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
                    <picture class="c-image">
                        <source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
                        <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
                        <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
                        <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
                        <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
                        <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
                        <img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
                </li>
                <div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
                    <div class="lightbox-container">  
                        <div class="lightbox-content">


                            <div class="video-container  youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
                                <!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                            </div>      

                        </div>
                    </div>
                    <button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
                            </button>
                </div>
            </ul>
        </div>
    </div>
</section>

​

 //lazy load youtube vids
document.addEventListener("DOMContentLoaded",
    function() {
        var div, n,
            v = document.getElementsByClassName("youtube-player");
        for (n = 0; n < v.length; n++) {
            var iframe = document.createElement("iframe");
            var embed = "https://www.youtube.com/embed/ID?showinfo=0";
            iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "1");
            iframe.id = v[n].attributes['youtube'].value;
            v[n].append(iframe);
          console.log(v[n].getAttribute('youtube') + 'youtube');
        }
    });


// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
    var video = document.getElementById(video_id).src;
    document.getElementById(video_id).src = video + '&autoplay=1'; // adding autoplay to the URL
    document.getElementById(div).style.display = 'block';
}

// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
    var video = document.getElementById(video_id).src;
    var cleaned = video.replace('&autoplay=1', ''); // removing autoplay form url
    document.getElementById(video_id).src = cleaned;
    document.getElementById(div).style.display = 'none';
}

Answer 1

我最终通过使用iframe.setAttribute('id'，vn.getAttribute(‘youtube’))让它工作；不确定为什么它能工作，而不是vn.properties‘youtube’..value；

document.addEventListener("DOMContentLoaded",
    function() {
        var div, n,
            v = document.getElementsByClassName("youtube-player");
        for (n = 0; n < v.length; n++) {
            var iframe = document.createElement("iframe");
            var embed = "https://www.youtube.com/embed/ID?showinfo=0";
            iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "1");
            iframe.setAttribute('id', v[n].getAttribute('youtube'));
            v[n].appendChild(iframe);
        }
    });