Question

我正在为Blackboard课程编写一个页面，兼容模式使它变得无用。 Blackboard使用iFrames嵌入内容，因此我创建的每个页面都基本上是使用iFrame嵌入的。我在页面顶部尝试了以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />

没有成功。该页面包含自定义元素和拖放功能。我能够使用以下内容显示自定义元素：

<!--[if lt IE 9]>
<script>
document.createElement("term");
document.createElement("r");
document.createElement("wr");
</script>
<![endif]-->

但内容不会拖动。这是我的拖放代码：

<table id="terms_container" frame="box" ondrop="drop(event)" ondragover="allowDrop(event)" >
  <tr ><td style="text-align:center;">Drag each of these items to the correct bin.</td></tr>
  <tr><td class="box"><hr>

    <term id="drag1" draggable="true" ondragstart="drag(event)">
    float salesTax = .05f;</term>
    <term id="drag2" draggable="true" ondragstart="drag(event)">char ampersand  '&';</term>
    <term id="drag3" draggable="true" ondragstart="drag(event)">final Max_Players = 4;</term>
    <term id="drag4" draggable="true" ondragstart="drag(event)">final int MAX_PLAYERS = 10;</term>

    <term id="drag5" draggable="true" ondragstart="drag(event)">String literal: "Hello World!</term>
    <term id="drag6" draggable="true" ondragstart="drag(event)">char diamond = Cx74;</term>
    <term id="drag7" draggable="true" ondragstart="drag(event)">float weight = 124.3;</term>

    <term id="drag8" draggable="true" ondragstart="drag(event)">long worldPopulation = +6000000000L;</term>


    </td></tr>
</table>
<div id="venn">
  <div id="c1" class="circle">
    <p>Valid</p>
    <div id="collection" ondrop="drop(event)" ondragover="allowDrop(event)" class="ans1"></div>
  </div>

  <div id="c2" class="circle" >
    <p>Not Valid</p>
    <div id="collection" ondrop="drop(event)" ondragover="allowDrop(event)" class="ans2"></div>
  </div>

</div>
        </div>
    </div>


<script type="Text/javascript">
 var count = 0;
function allowDrop(ev){
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
} 

function drop(ev)
{
ev.preventDefault();
var thetag = ev.target.nodeName;
var theanswer = ev.target.className;
var data=ev.dataTransfer.getData("Text");
  if(thetag == "TERM"){
    null;
  }
  else{
    ev.target.appendChild(document.getElementById(data));
    checkAnswer(data, theanswer);
  }

}

function checkAnswer(theterm, theiranswer){
  var stripped = theterm.replace('drag', '');
  var _0xc89b=["","\x62\x6F\x74\x68","\x61\x6E\x73\x31","\x61\x6E\x73\x32"];var theanswers=[_0xc89b[0],_0xc89b[2],_0xc89b[2],_0xc89b[3],_0xc89b[2],_0xc89b[3],_0xc89b[3],_0xc89b[3],_0xc89b[2]];
  if(theiranswer == theanswers[stripped]){
    count++;
    $("#"+theterm+" wr").remove();
    $('#'+theterm).append(" <r>&#x2713;</r>");
    $('#'+theterm).css( 'cursor', 'default' );
    $("#"+theterm).droppable({
      drop: function( event, ui ) {
        $( this ).html( $( event.originalTarget ).html() );
        $( ui.draggable ).draggable( "destroy" );
      }
    });
    $('#'+theterm).on('dragstart', function(event) { event.preventDefault(); });
  }
  else if(theiranswer=="box"){
    null;
  }
  else{
    $("#"+theterm+" wr").remove();
    $('#'+theterm).append(" <wr>&#x2717;</wr>");
  }
  if(count==8){
    $('.box').html("<h3 style=\"text-align: center;\">Correct!</h3>");
    var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
    if(isFirefox==true){
      $('#replay').css( "display", "block");
      $('#replay').css("margin-top", "200px");
      $('#replay').css("margin-left", "44%");
    }
    else{
      $('#win').css( "display", "block");
      restartbutton();
    }
  }
}

function restartbutton(){
  setTimeout(function() {
    //$('#win').hide();
    $('#replay').css( "display", "block");
  },2000);
}


function restartgame(){
  alert("This button will restart the game");
  //window.location.reload();
}
</script>

在IE浏览器中无法绕过Quirks模式

0 个答案: