document.body.innerHTML嵌入在SharePoint清除页面中，如何打印结果并停止脚本？

Question

我需要请求使用IE 11（在Windows 7中）访问SharePoint页面的用户使用Firefox访问同一页面，因为我正在嵌入Office 365视频，这些视频在IE 11中使用Flash播放，我们需要使用Firefox for HTML5提高视频质量。

让我先言一下，我不是脚本专家。下面的例子是我发现我修改的例子，只有IE 11才有结果。我可以通过将脚本放在基本HTML文件的主体中来运行脚本。

如果我尝试将其作为嵌入式脚本或加载到页面顶部的iFrame中的HTML文件加载到SharePoint中，我希望消息显示在其中，它会清除页面。

我完全理解，函数document.body.innerHTML将清除页面正文中显示的内容。当我在纯HTML页面中加载脚本但在SharePoint中加载脚本时，它不会这样做。解决问题的唯一方法是用早期版本替换页面以删除有问题的脚本。

我现在假设在加载了所有其他内容之后，脚本应该嵌入到SharePoint页面的底部，然后加载结果，在这种情况下browserName = 'This site is best viewed using Firefox';以某种方式在页面顶部。说实话，我不知道如何实现这一目标。我有几个使用警报功能的类似示例，但在这种情况下，我希望结果显示在页面顶部，以便使用IE 11访问SharePoint。任何帮助将不胜感激：）

var browserName;

// Opera 8.0+
if ((window.opr && opr.addons) || window.opera || (navigator.userAgent.indexOf(' OPR/') >= 0))
browserName = "";

// Firefox 1.0+
if (typeof InstallTrigger !== 'undefined')
browserName = "";

// At least Safari 3+: "[object HTMLElementConstructor]"
if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0)
browserName = "";

// Internet Explorer 6-11
if ((/*@cc_on!@*/false) || (document.documentMode))
browserName = 'This site is best viewed using Firefox';

// Edge 20+
if (!(document.documentMode) && window.StyleMedia)
browserName = "";

// Chrome 1+
if (window.chrome && window.chrome.webstore)
browserName = "";

document.body.innerHTML = browserName;

`

[UPDATE] 凭借我有限的技能，我通过替换

得到了一个好的结果

document.body.innerHTML = browserName;

以下，

document.write(browserName);

当然，只检查IE会更好，但我发现将其他浏览器类型的输出留空更简单

Answer 1

IE11支持HTML5视频标记（至少当它没有在兼容模式下运行并因此模拟IE8时），所以这听起来像XY problem。如果不在IE11中使用Flash（或配置页面以使其不强制IE以兼容模式显示），您的努力可能会更有成效地尝试播放视频。

话虽如此，有几种不同的方法可以通过JavaScript将HTML插入页面而不会覆盖任何现有内容。

insertAdjacentHTML

一种方法是抓取页面上的现有元素（使用document.querySelector或document.getElementById），然后使用element.insertAdjacentHTML在该元素旁边插入所需的HTML。

请注意，您也可以通过编辑document.querySelector属性，在使用innerHTML抓取该元素后直接修改该页面上已有的元素，尽管它通常是个更好的主意保持不变，只需添加自己的HTML。

document.createElement（）和document.body.appendChild（）

另一种方法是通过document.createElement创建自己的HTML元素，调整其样式属性，使其绝对位于其父级顶部附近，然后将其附加到文档中体。

查看下面的示例代码段，了解这些方法的实际效果。

＆＃13;

＆＃13;

document.getElementById("insert").onclick = addByInsertion;
document.getElementById("create").onclick = addByCreation;

function addByInsertion(){
  // grab an existing element near the top
  var div = document.querySelector(".MainContent"); 
  
  // insert your HTML near the element
  div.insertAdjacentHTML("beforebegin","<h1>Your Special Message Here</h1>");
}

function addByCreation(){
  // create an element
  var announcement = document.createElement("h1"); 
  
  // add styling to the element so it shows up at the top
  announcement.style.position = "absolute";
  announcement.style.top = 0;
  announcement.style.border = "2px solid black";
  announcement.style.backgroundColor = "white";
  announcement.innerHTML = "Your Special Message Here";
  
  // append the element to the body of the document
  document.body.appendChild(announcement);
}

＆＃13;

<div>Existing Content</div>
<div class="MainContent">
  <h1>Example</h1>
  <table>
    <tr>
      <td>Example</td>
      <td>Placeholder</td>
      <td>Table</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
     </tr>
  </table>
</div>
<div>
  <button id="insert">insertAdjacentHTML</button>
  <button id="create">document.createElement</button>
</div>

＆＃13;

＆＃13;

＆＃13;