javascript - 如何链接两个html页面

Question

所以我正在开发一个聊天应用程序，我想添加表情。所以我使用了两个html页面。第一个包含我们编写消息时的文本区域和引用第二个 html 页面的 iframe。

<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();
}

但它不起作用:(我认为问题可能出在 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');" .

这将调用父函数并在该页面上进行更改，因为元素存在于父级上。