2016-01-08 5 views
0

На данный момент я создаю страницу. Страница будет отображаться с помощью iPod Touch (5-го поколения) в браузере Safari. Кроме того, страница должна отображаться в полноэкранном режиме.изменить содержимое html с содержимым javascript

Теперь я начал решать эту проблему, но некоторые материалы отсутствуют. Это моя стартовая страница 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>

Кнопки отсутствуют. А код неправильно, я нажал на странице RightClick -> Показать код, а код на странице:

<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> 
Смежные вопросы