javascript - 无法让我的脚本 (jquery) 将文本从第 1 帧插入到第 2 帧的文本区域中。

标签 javascript jquery cross-domain dynamic-linking frames

我一直在尝试实现这一点,但没有成功——执行高级搜索失败。当前设置如下:我不知道如何将框架链接在一起,因此当我单击第一框架中的列表时,文本将被插入并显示在第二框架文本区域中。我知道一定有一种我缺少的更简单的方法来做到这一点。谢谢!

         index.html (frameset)
              |
              |
            /   \
           /     \
     group_a.html    group_b.html



**index.html**
<html>
<frameset cols="60%,40%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>>
  <frame src="group_a.html">
  <frame src="group_b.html">
</frameset>
</html>

group_a.html
</style>
<style>
    li:hover {
        cursor: hand; cursor: pointer; background-color:#66CCFF
    }

</style>

<script type="text/javascript" src="jquery221min.js"></script>
<script>
$(document).ready(function(){
    $("li").click(function(){
        $('#alltext').append($(this).text());

        $("a").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
    });
    function redirectPage() {
        top.frames["group_b.html"].location = linkLocation;
});
</script>
</head>
<body>

<ul>
    <li>Text choice 1</li>
    <li>Text choice 2</li>
    <li>Text choice 3</li>
    </ul>

</body>
</html>

 group_b.html
 <html>
  <body>

    <form>
      <textarea name="alltext" id="alltext" cols="60" rows="30">      </textarea>
  </form>

最佳答案

frame1 无法访问frame2 的 DOM。这意味着您无法按预期使用 jQuery 操作文本区域。相反,使用 postMessage在帧之间发送消息,然后在第二帧中为该消息设置监听器。当您收到它时,请相应地设置文本。像这样的东西:

第 1 帧

var msg = {
   message: "updateText",
   text: $(this).text()
};

top.frames["group_b.html"].postMessage(JSON.stringify(msg), '*');

第 2 帧

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{ 
  if (event.data.message === "updateText"){
    $('#alltext').text(event.data.text);
  }
}

请注意,您必须将代码放置在 jQuery 对象范围内的位置。

关于javascript - 无法让我的脚本 (jquery) 将文本从第 1 帧插入到第 2 帧的文本区域中。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35567855/

相关文章:

jQuery 显示和隐藏计时器

php - 使用 Jquery 删除逗号

ssl - 使用 Internet Explorer 启用 SSL 的站点上的图像

javascript - 为什么 onDeviceReady 中的 if() 语句会循环?

javascript - 使用javascript修改嵌套在div中的html元素

jquery - Joomla Acymailing 订阅模块单选按钮未居中

jquery - 如何在jsFiddle中使用ajax请求

html - 是否可以为 iframe 设置 Origin Header?

javascript - 在 Material ui 中为扩展面板提供事件颜色

javascript - 带有 contenteditable 的真实计数器