2016-01-08 55 views
0

此刻我创建了一个页面。该页面将在Safari浏览器中与iPod Touch(第5代)一起显示。另外,该页面应该以全屏模式显示。使用javascript更改html内容缺少内容

现在我开始解决这个问题,但有些内容丢失了。 这是我的首页index.html

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="css/desktop.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/ipod.css"> 
 

 
    <script src="js/jquery-1.11.3.min.js"></script> 
 

 
    <meta name="apple-touch-fullscreen" content="yes" /> 
 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
 
</head> 
 

 
<body> 
 
    <div id="content"> 
 
    <div id="dumpingStationButtonContainer"> 
 
     <a id="dumpingStationOneButton" class="dumpingStationButton">Lader&uuml;ssel 1</a> 
 
     <a id="dumpingStationTwoButton" class="dumpingStationButton">Lader&uuml;ssel 2</a> 
 
    </div> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#dumpingStationOneButton').click(function() { 
 
     $('body').load("dumpingStationOne.html"); 
 
     }); 
 

 
     $('#dumpingStationTwoButton').click(function() { 
 
     $('body').load("dumpingStationTwo.html"); 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

dumpingStationOne.html

<div id="content"> 
 
    <div id="cameraContainer"> 
 
    <script type="text/javascript"> 
 
     var sDomainPort = 80; 
 
     var Speck_var = 0; 
 
     var channel_s = 0; 
 
     var view_w = 900; 
 
     var view_h = 675; 
 

 

 
     if (window.innerWidth > 0) { 
 
     window_width = window.innerWidth; 
 
     } else { 
 
     window_width = screen.width; 
 
     } 
 

 
     if (window_width < 981) { 
 
     var percent = window_width/view_w; 
 
     view_w = window_width; 
 
     view_h = percent * view_h; 
 
     } 
 

 
     function onLive(sDomainURL, test) { 
 
     var ret; 
 
     var obj = document.getElementById(test); 
 
     obj.Author('admin', 'admin'); 
 
     obj.SetDateFormat(0); 
 
     obj.SingleAudio = 0; 
 
     obj.VideoPath = channel_s; 
 
     obj.UnderScan = 1; 
 
     obj.ROILEFT = 0; 
 
     obj.ROITOP = 0; 
 
     obj.ROIRIGHT = 0; 
 
     obj.ROIBOTTOM = 0; 
 

 
     //var bSuccess = obj.CheckInitState; 
 
     //if (bSuccess == 0) { 
 
     // \t setTimeout("onLive();", 1000); 
 
     // \t return; 
 
     //} 
 
     obj.LivePlay(sDomainURL, sDomainPort, sDomainPort, 0); 
 
     } 
 

 
     function closeActiveX(test) { 
 
     var obj = document.getElementById(test); 
 
     obj.CloseActiveX(); 
 
     } 
 

 
     document.write('<object id="LiveShow1" classid="clsid:f9bf64a0-5a65-43e0-acdb-b223e7f9ddd9" CODEBASE="WEBWATCH2.cab#version=1,2,5,24" width="' + view_w + '" height="' + view_h + '"> '); 
 
     document.write('<img id="camera" width="' + view_w + '" height="' + view_h + '" src="http://192.168.1.195/GetData.cgi?CH=1" alt="Die Verbindung wurde unterbrochen. Bitte warten..."</img>'); 
 
     document.write('</object>'); 
 
    </script> 
 
    </div> 
 

 
    <div id="operationButtonContainer"> 
 
    <a id="btnMoveUp" unselectable="on" class="operationButton">Heben</a> 
 
    <a id="btnStartStop" unselectable="on" class="operationButton">Start</a> 
 
    <a id="btnMoveDown" unselectable="on" class="operationButton">Senken</br></a> 
 
    <div id="circleDiv"> 
 
     <div id="lifeCircle" class="greenCircle"></div> 
 
    </div> 
 
    <a id="btnBack" unselectable="on" class="operationButton" href="index.html">Zur&uuml;ck</a> 
 
    </div> 
 
    <div class="clearBoth"></div> 
 
</div>

的按钮是丢失。代码是错误的,我按下页面右键单击 - >显示代码,并在页面上的代码是:

<object id="LiveShow1" classid="clsid:f9bf64a0-5a65-43e0-acdb-b223e7f9ddd9" CODEBASE="WEBWATCH2.cab#version=1,2,5,24" width="900" height="675"> <img id="camera" width="900" height="675" src="http://192.168.1.195/GetData.cgi?CH=1" alt="Die Verbindung wurde unterbrochen. Bitte warten..."</img></object> 

这就是所有。按钮丢失。我错了什么?谁能帮我?

+2

我认为“document.write”取代了页面上的所有内容。那是你要的吗?尝试使用以下内容将内容设置为div:document.getElementById('myDiv')。innerHTML =“text”; – arpo

+1

@arpo感谢您的评论。你的想法是正确的!写一个答案,我会将它标记为解决方案。 – MyNewName

回答

1

“document.write”替换页面上的所有内容。使用document.getElementById('myDiv')。innerHTML =“text”;代替。像这样:

<div id="myDiv"></div> 

<script type="text/javascript"> 
    var code = '<object id="LiveShow1" classid="clsid:f9bf64a0-5a65-43e0-acdb-b223e7f9ddd9" CODEBASE="WEBWATCH2.cab#version=1,2,5,24" width="\' + view_w + \'" height="\' + view_h + \'">' + 
       ' <img id="camera" width="\' + view_w + \'" height="\' + view_h + \'" src="http://192.168.1.195/GetData.cgi?CH=1" alt="Die Verbindung wurde unterbrochen. Bitte warten..." </img>\'' + 
       '</object>'; 
    document.getElementById('myDiv').innerHTML = code; 
</script>