通过 iFrame 提问 Qtip - 使用 JQUERY LIVE答案

【问题标题】：Question Qtip through iFrame - With JQUERY LIVE通过 iFrame 提问 Qtip - 使用 JQUERY LIVE
【发布时间】：2010-04-15 21:56:40
【问题描述】：

我想在我的页面上的 iFrame 中找到一个使用 Qtip 的方法。我找到了一种在 iframe 上使用 QTIP 的方法，但不适用于 JQUERY LIVE ....

通过 iFrame 提示：http://craigsworks.com/projects/forums/thread-question-qtip-through-iframe

关于如何将 JQUERY Live 应用于此的任何想法？

我当前的代码：

$('iframe').load(function(){
  $(this).qtip(
  {
    content: 'My first Qtip! Look mom!',
    show: {
      when : {
         target: $(this).contents().find('.tipoff') // Element within the iframe
      }
    },
    hide: {
      when : {
         target: $(this).contents().find('.tipoff') // Element within the iframe
      }
    }
  });
});

谢谢

【问题讨论】：

标签： jquery iframe jquery-plugins live qtip

【解决方案1】：

我知道这已经快一年了，但我只是想做类似的事情，并认为我会发布我的发现。我不完全确定你在追求什么，它可能与我所拥有的不同，但我假设你想像我一样将qTip 应用于动态加载的<iframe> 中的某些元素。

它没有解决live() 的问题，尽管根据Adding a row to a table in an iFrame with jQuery (live?) 它应该可以工作，但这是我最终得到的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        iframe {
            border:1px dashed red;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="jquery.qtip.min.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="jquery.qtip.min.js"></script>
    <script type="text/javascript">

        $(function() {
            $('p a.tip').qtip({
                content: 'foo'
            });

            $('iframe').load(function() {
                var position = $(this).position();
                var top = position.top;
                var left = position.left;
                $(this.contentDocument).find('p a.tip').qtip({
                    content: 'bar',
                    position: { adjust: { x:left, y:top } }
                });
            });

            $('#click').click(function(){
                $('iframe').attr('src', 'test.html');
                return false;
            });
        });

    </script>
</head>
<body>
    <p><a class="tip" href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit.</a></p>
    <iframe></iframe>
    <p><a href="#" id="click">Load iFrame</a></p>
</body>
</html>

test.html 包含的位置：

<p><a class="tip" href="#">Duis massa metus</a>, convallis vitae, mollis vel, feugiat vitae, nunc.</p>

你可以从qTip2得到jquery.qtip.min.css和jquery.qtip.min.js。

编辑：确保页面从网络服务器加载到浏览器中（不仅仅是作为本地文件加载）以避免Same origin policy。

希望这对某人有用！ :-)

【讨论】：