iFrame中的qTip2 [英] qTip2 within an iFrame

问题描述

我在iframe中使用jQuery qTip2，但由于我被限制为iframe宽度和高度的大小，无论如何我可以将内容实际显示在iframe的顶部，即iframe的父窗口内而不是在实际的iframe中？

I am using jQuery qTip2 within an iframe but since I am restricted to the size of the iframe width and height, is there anyway I could have the content actually appear on top of the iframe, i.e. within the parent window of the iframe and not within the actual iframe itself?

这样，我不受iframe大小限制。

In this way, I am not restricted within the iframe size.

这是我作为iframe的一部分使用的当前代码：

This is the current code that I am using as part of the iframe:

$(document).ready(function() {
   $('img[title]').qtip({
         content: {
            text: false, // Use each elements title attribute
            title: {
              text: 'Error',
              button: 'Close'
            }
         },
         hide: {
           event: false
         },
         style: {
            classes: 'ui-tooltip-dark ui-tooltip-rounded',
            height: 5,
            width: 500
         },
         position: {
            my: 'bottom right',
            at: 'top left'
         }
   });
});

推荐答案

Craig发布链接以回应您在qTip2论坛中的同一帖子回答了您的问题：

Craig posted a link in response to your same post in the qTip2 forums which answers your question:

http://craigsworks.com/projects/forums/thread-solved-qtip-in-iframe-and-mouse-tracking

阅读讨论，简短的回答是你必须从父文档初始化qTips，jQuery很容易。困难的部分是你必须处理Javascript的同源政策 。换句话说，两个文档必须来自同一个域。如果没有，那你就不走运了。

From reading the discussion, the short answer is that you'll have to initialize the qTips from the parent document, which jQuery makes easy. The hard part of that is that the you'll have to deal with the same origin policy of Javascript. In other words, both documents must come from the same domain. If not, you're out of luck.

另一个警告是，你必须手动调整qTip定位，因为你是从父文档初始化的。

One other caveat is that you'll have to manually adjust the qTip positioning since you're initializing from the parent document.

这是一个有效的例子：

http://fiddle.jshell.net/4QDcz/1/

$(document).ready(function () {

    $('#theFrame').contents().find('.selector').qtip({
        position: {
            adjust: {
                x: $('#theFrame').offset().left,
                y: $('#theFrame').offset().top
            }
        }
     });

});

这篇关于iFrame中的qTip2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！