2015-03-07 3 views
1

Я разработал собственный инструмент для своих клиентов, в котором они могут отправлять отзывы в центральную базу данных.Минимизация Javascript и HTML код

У меня есть длинный код HTML и JavaScript, который клиенты вставляют на свой веб-сайт, и инструмент появляется на веб-сайте.

Моя проблема заключается в том, как свести к минимуму этот код? Я видел чат-инструменты, которые требуют вставить только несколько строк кода, и он появляется в браузере.

Ниже мой код, и мне нужно создать небольшую часть кода из него.

<div id='htmlfeedback-container-more'> 
<a id='lnkdivFeedBackPage1' href='#'>FeedBack</a> | <a id='lnkdivFeedBackPage2' href='#'>Settings</a><br /><br /> 
<div id='divFeedBackPage1'> 
<div id='content' class='content'></div> 
<p>Please give a short description of your feedback. You can also highlight or blackout parts of the screen.</p> 
<p>Note: Click on highlighted areas to disappear </p> 
<form id='htmlfeedback-form'> 
<p> <span>Marker:</span><input type='radio' name='marker' value='rgba(255,255,255,0)' style='width:10%' checked> Highlight <input type='radio' name='marker' value='rgb(0,0,0)' style='width:10%'> Black out </p> 
<p><span>Name or E-mail:</span> <input type='text' name='email' id='htmlfeedback-input-email' style='width:88%'/></p> 
<p><span>Short description:</span> <textarea name='description' id='htmlfeedback-input-description'></textarea></p> 
<p><input type='submit' id='htmlfeedback-submit' value='Send' style='background-color:#5547ec'><input type='reset' id='htmlfeedback-reset' value='Reset' style='width:30%;background-color:#5547ec'></p> 
</form></div> 
<div id='divFeedBackPage2'> 
<p>Changes will take effect through all the instances of the tool if you have added the control in multiple locations.</p> 
<form id='frmfeedBackSettings-form'> 
<p><span>Title:</span><input type='text' name='text' id='txtfeedBackTitle' style='width: 88%' /></p> 
<p><span>Color:</span><input type='text' name='text' id='txtfeedBackColor' /></p> 
<input type='submit' id='btnSubmitFeedbackSettings' value='Submit'/> 
</form></div></div></div> 
<div id='divWaitMsg' style='display:none; color:blue; font-size:20px' class='centered'>Please Wait....</div> 
+0

Если клиент находятся в PHP или среде ASP.Net, вы можете сделать включать или UserControl, который позволит им вставить одну строку. Другим вариантом было бы разместить вышеуказанный HTML на странице и соответствующий JavaScript на вашем сайте, тогда клиенты могут вставлять строку iframe на свою страницу, которая загружает ваш HTML. Более ясное представление об окружающей среде и о том, где база данных относится к веб-сайту клиента, поможет. –

ответ

1

То, как некоторые люди делают то, что вы пытаетесь сделать с помощью всего пару строк кода с HTML плавающие фреймы,

Как

<noscript>Enable Javascript to get full functionality of this <a href="http://www.freeshoutbox.net/">shoutbox</a><br /></noscript><iframe src="http://CodeLuca.freeshoutbox.net/" height="300" width="500" frameborder="0"></iframe>

или

<iframe width="560" height="315" src="https://www.youtube.com/embed/DBXZWB_dNsw" frameborder="0" allowfullscreen></iframe>

Если вы хотите сделать это, вам просто нужно сделать свою форму на пустой странице, а затем сделать iframe который ссылается на него.

Удачи!

Лука

+0

iframes не являются функцией 'html5', они были навсегда. Как вы подтверждаете, что большинство людей использует этот подход? – charlietfl

+0

@charlietfl Извините, да, это не функция html5, отредактированная, не знаю, почему я это сказал. Кроме того, я использовал множество таких сервисов, или им пришлось внедрять вещи, и они обычно используют iframes ... Спасибо за комментарий, хотя! – LucaSpeedStack

0

Вы можете ввести код js в dom, где это необходимо, и добавить его, поместив тег скрипта.

<script src="feedback-form.js"></script> и форма обратной связи будет вводить содержимое html.

Смежные вопросы