Question

我正在尝试在Microsoft Dynamics门户网站上的某些表单上创建一个帮助窗口，它具有自己的CMS以构建Web应用程序。

由于“错误”不同，此窗口在IE11或Edge上不起作用。

首先，这是我的JavaScript函数，用于为“大多数”浏览器加载窗口：

function openWindow(text) {
    var textNode = document.createElement('p');
    textNode.innerHTML = text;
    if(navigator.userAgent.indexOf('.NET') > 0 || navigator.userAgent.indexOf('Edge') > 0) {
        var window1 = window.showModalDialog('', [1, 4], "dialogwidth: 450; dialogheight: 300; resizable: no");
        window1.appendChild(textNode);
    } else {
        var window1 = window.open('','Ayuda de Formulario','toolbar=no,width=700,height=500,left=500,top=200,status=no,scrollbars=no,resize=no');
        window1.document.body.append(textNode);
    }
}

由于IE的兼容性，我使用window.showModalDialog。

这是我捕获鼠标单击图像的地方：

$('.form-helper').click(function() {
    var language = $('html').attr('lang').split('-')[0];
    getFormHelper($(this), language);
});

这是我加载表单助手的地方：

window.formHelpers = loadFormHelpers();
function loadFormHelpers() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/API', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
       if(xhr.status == 200) {
         var jsonResponse = JSON.parse(this.response),
             results = jsonResponse.results;
             window.formHelpers = results;
       } else {
        console.error('API Error');
       }
    }
  };
  xhr.send(null);
}

当然，第一个运行：

$(document).ready(function() {
    loadFormHelpers();
});

我正在使用Microsoft Edge：

在IE11上，开发人员工具上出现一个空白窗口：

说 该方法不接受属性或方法“追加”

有什么建议可以在所有浏览器上正常工作吗？

Answer 1

尝试使用appendChild代替。像这样： window1.document.body.appendChild(textNode);

Answer 2

好吧

我改用window1.document.write(text)做到了。

它就像：

function openWindow(text) {
    var window1 = window.open('','Ayuda de Formulario','toolbar=no,width=700,height=500,left=500,top=200,status=no,scrollbars=no,resize=no');
    window1.document.write(text);
}

Answer 3

Microsoft Portals随Bootstrap一起提供，如果您尝试使用Bootstrap模型可能会带来更好的总体效果。

w3schools中的示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

窗口打开不适用于IE11

3 个答案: