この質問を編集して書き直すのはこれで 3 回目です。コードをデバッグするにつれて、問題の新しい側面を見つけ続けます。この投稿を整理して、少しでも読みやすいようにします...
<object>A.ノードを<iframe>For ループ経由で置き換えようとすると、ループは「オブジェクト」ノードの最初のインスタンスを置き換えてから停止します。その後、すべてのコンテンツが失われます。
B. 問題を切り分けようとしているときに、<object>ノードを や などの別のタグ<p>に置き換えようとする<button>と、タグが隣接する要素を包含することに気付きました。
問題の for ループのサンプルを次に示します。最終的な目標は、見つけた YouTube ノードを見つけて、同等の YouTube<object>ノードに置き換えることであることに気付くかもしれません。<iframe>ただし、現在、問題を説明するためにダミー要素 (この場合はボタン) を使用しています。
article.content = items[n].querySelector("description").textContent;
//Test to parse the article content into HTML.
var HTMLParser = new DOMParser();
var htmlArticleContent = HTMLParser.parseFromString(article.content, "text/html");
//Test Video Script Editor
var objectPoll = htmlArticleContent.getElementsByTagName("object");
var numberOfObjects = objectPoll.length;
for (var j = 0; j < numberOfObjects; j += 1) {
if (objectPoll[j] != null) {
var videoEmbed = htmlArticleContent.getElementsByTagName("embed")[j];
if (videoEmbed != null) {
var videoSrc = videoEmbed.getAttribute("src");
if (videoSrc.split(".")[1] == "youtube") {
var newSrc = videoSrc.replace("/v/", "/embed/");
var iFrame = document.createElement("iframe");
iFrame.setAttribute("src", newSrc);
iFrame.setAttribute("height", objectPoll[j].getAttribute("height"));
iFrame.setAttribute("width", objectPoll[j].getAttribute("width"));
iFrame.setAttribute("frameborder", "0");
iFrame.setAttribute("allowfullscreen");
iFrame.setAttribute("type", "text/html");
iFrame.setAttribute("iv_load_policy", "3");
var test = document.createElement("button");
objectPoll[j].replaceNode(test);
}
else { }
}
}
}
代わりに、DOM Explorer からの最終結果を次に示します。
<button>
<br>
<br>
<font size="3"><b>WoW Stream 2</b></font><br>
<br>
<object width="682" height="416" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=wow_2" type="application/x-shockwave-flash" bgcolor="#000000">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all"><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf"><param name="flashvars" value="hostname=www.twitch.tv&channel=wow_2&auto_play=player&start_volume=25"></object>
</button>
どういうわけか、replaceNode()完全に間違った HTML のセグメントを囲んでいます。を介してオブジェクトの場所が正しくインデックス化されていないことが懸念されますgetElementsByTagName()。
これは元の HTML の小さなサンプルで、WinJS.xhr を介して外部サイトから供給されています。読み通すのが苦痛であることは理解しています。最初の 3 つのオブジェクト タグを分離し、改行で区切りました。
<img src="http://media.mmo-champion.com/images/news/2011/november/d3.png" style="margin-bottom:-2px; margin-right:0px; vertical-align:bottom" />
<b><a href="http://www.diablofans.com/news/1413-uber-bosses-speed-kill-video-blue-posts-bonus-blizzard-comic-contest-entry-black-ops-2-outsells-harry-potter-and-star-wars/" target="_blank">Uber Bosses Speed Kill Video, Blue Posts, Bonus Blizzard Comic Contest Entry, Black Ops 2 Outsells Harry Potter and Star Wars</a></b><br /> <br />
<font size="3"><b>Battle.net World Championship</b></font><br /> <br />
<div style="text-align: center;"><font size="3"><b>WoW Main</b></font><br /> <br />
<object type="application/x-shockwave-flash" height="416" width="682" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=wow" bgcolor="#000000"><param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=wow&auto_play=false&start_volume=25" />
</object>
<br /> <br /> <font size="3"><b>WoW Stream 2</b></font><br /> <br />
<object type="application/x-shockwave-flash" height="416" width="682" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=wow_2" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=wow_2&auto_play=player&start_volume=25" />
</object>
</div><br /> <br /> <font size="3"><b>Patch 5.1 - Loss of Control Alerts</b></font><br /> Patch 5.1 adds alerts when you lose control of your character to the default UI. They tell you what is affecting your character and the remaining duration. <br /> <br />
<div style="text-align: center;">
<object width="853" height="480"><param name="movie" value="http://www.youtube.com/v/PbIAuqwFC-Q?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/PbIAuqwFC-Q?version=3&hl=en_US" type="application/x-shockwave-flash" width="853" height="480" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<br /> <br />
<a href="http://media.mmo-champion.com/images/news/2012/november/alertOptions.jpg" target="_blank"><img src="http://media.mmo-champion.com/images/news/2012/november/thumb/alertOptions.jpg" border="0" alt="" /></a> <a href="http://media.mmo-champion.com/images/news/2012/november/alerts.jpg" target="_blank">
<img src="http://media.mmo-champion.com/images/news/2012/november/thumb/alerts.jpg" border="0" alt="" /></a> </div><br /> <br /> <font size="3"><b>Popular Glyphs</b></font><br /> Guildox recently added a new feature that will show you which glyphs are popular with the top 5% of players, broken down by PvP and PvE. If you are looking for the <a href="http://www.guildox.com/go/g.asp?c=8&r=&w=&a=24&n=&e=pve" target="_blank">popular glyphs</a> for your class, this should help!<br /> <br /> <div style="text-align: center;">