这将是我第三次编辑和重写这个问题。在调试代码时，我不断发现问题的新方面。我会尽量组织这篇文章，让阅读起来有点痛苦……
A. 当试图通过 For 循环替换<object>节点时<iframe>，循环将替换“对象”节点的第一个实例，然后停止。之后的所有内容都丢失了。
B. 在尝试隔离问题时，注意到如果我尝试<object>用不同的标签替换节点，例如<p>or <button>，标签将包含相邻元素。
这是有问题的 for 循环的示例；您可能会注意到，它的最终目标是找到<object>它所定位的任何 YouTube 节点并将其替换为 YouTube<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 从外部站点提供的；我理解阅读是否很痛苦。我隔离了前三个对象标签并用换行符分隔它们。
<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;">