Chaymae Chaymae - 2 months ago 4x
HTML Question

How to link two html pages

So i'm working on a chat application and i want to add smileys. So i used two html pages. the first one contain the text area when we wright the messages and an iframe that references the second html page.

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

in the second html page i have smiley images

<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');" />

So i want that when i click at a smiley image that a text got inserted in my text area so i used the following script

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

But it doens't work :( i thought the problem might be in document.getElementById since it's another html page but i have no idea how to solve it.
Thanks a lot

  1. Have you included the <script src="Scripts_Chatapp/emoticone.js"></script> in iframe too? If yes, remove the script reference from iFrame.

  2. Move the script reference <script src="Scripts_Chatapp/emoticone.js"></script> at top of page with other script tags.

  3. Change the onclick="insertSmiley('sad');" TO onclick="parent.insertSmiley('sad');".

This will call the parent function and make changes on that page, since element exists on parent.