Как связать две html-страницы

Question

Итак, я работаю над чат-приложением, и я хочу добавить смайлики. Поэтому я использовал две html-страницы. первая содержит текстовую область, когда мы адресуем сообщения и iframe, ссылающиеся на вторую страницу html.

<div class="col-12"> 
    <textarea class="col-12 row-12 var_MessageInput" id="textmsg" placeholder="Write a reply..."></textarea> 
</div> 

во второй HTML-странице У меня есть смайлик изображение

<img src="../../../images/sad_smile.gif" onclick="insertSmiley('sad');"/> 
<img src="../../../images/angel_smile.gif" onclick="insertSmiley('angel');"/> 
<img src="../../../images/happy_smile.gif" onclick="insetSmiley('happy');" /> 

Так я хочу, чтобы, когда я нажимаю на смайлик изображения, текст был вставлен в моей области текста таким образом я использовал следующий сценарий

function insertSmiley(smiley) { 
    var currentText = document.getElementById("textmsg"); 
    var smileyWithPadding = " " + smiley + " "; 
    currentText.value += smileyWithPadding; 
    currentText.focus(); 
} 

но doens't работы :(я думал, что проблема может быть в document.getElementById, так как это другая страница HTML, но я понятия не имею, как ее решить. Спасибо большого

Answer 1

1. Включили вы в <script src="Scripts_Chatapp/emoticone.js"></script> в IFRAME тоже? Если да, удалите ссылку на скрипт из iFrame.

2. Переместите ссылку сценария <script src="Scripts_Chatapp/emoticone.js"></script> в начало страницы с другими тегами сценария.

3. Изменить onclick="insertSmiley('sad');"onclick="parent.insertSmiley('sad');".

Это вызовет родительскую функцию и внесут изменения на эту страницу, поскольку элемент существует в родительском.

Answer 2

У вас есть одна опечатка в onclick="insetSmiley('happy');", она должна быть onclick="insertSmiley('happy');". Я проверил его, и это работает для меня.

Answer 3

В коде JS используйте:

window.location = "second_HTML_Page.html" ; 

Answer 4

Проблема заключается в том, что, когда функция вызывается в плавающем фрейме, осциллографы усложняются.

Решение должно заключаться в том, чтобы сделать функцию глобальным, определив ее на уровне window. И тогда, когда функция должна запускаться внутри iFrame, она может вызывать функцию родителя iFrame (главное окно).

Пример Fiddle: http://jsfiddle.net/e37rrtb1/2/