Minipreview jQuery link 仅预览父 <p> 或 <div> 的内容

Question

我想使用 https://github.com/lonekorean/mini-preview 仅为网站的某些部分创建鼠标悬停预览。

我可以毫无问题地使用来自目标网站的锚点让脚本呈现完整的网站预览，滚动到 individual 锚点所在的位置。然而，这不是我想要的。

我希望脚本只显示锚父

或

的内容。

在网站上，link 目标锚点编码如下：

<div class="paragraph">
    <p>
        <a id="anchor_1"></a>
        Foo bar baz.
    </p>
</div>

所以，我希望小预览框只显示 Foo bar baz.。

我怀疑答案就在脚本的这一部分：

loadPreview: function() {
    this.$el.find('.' + PREFIX + '-frame')
        .attr('src', this.$el.attr('href'))
        .on('load', function() {
            // some sites don't set their background color
            $(this).css('background-color', '#fff');
});

特别是 .attr('src', this.$el.attr('href')) 部分。不过我不确定。

有人知道我该怎么做吗？
或者你能推荐一些其他的脚本，我可以用它来做这个并让事情看起来像这个一样好吗？

我不是网络开发人员，所以请放轻松。
谢谢

更新（基于斯瓦蒂的回答和相应的评论）：

例如，如果我的网站包含以下内容：

<body>
    <p>
        <a href="#anchor_on_my_site">See internal</a>
    </p>
    <p>
        <a href="external_website.html#external_anchor">See external</a>
    </p>
    <div class="paragraph">
        <p>
            <a id="anchor_on_my_site"></a>
                Foo bar baz.
        </p>
    </div>
</body>

外部网站包括：

<body>
    <div class="paragraph">
        <p>
            <a id="external_anchor"></a>
                Qux quux quuz.
        </p>
    </div>
</body>

我希望See internal显示Foo bar baz.，See external显示Qux quux quuz.

Answer 1

在 loadPreview 函数中，您可以使用 closest('p').clone().children().remove().end().text() 从 p 标记中获取文本，其中 a 已悬停，然后使用此功能将该文本显示在您的框架内div 即：.find('.' + PREFIX + '-frame').text(data_to_show) .

演示代码 :

(function($) {
  var PREFIX = 'mini-preview';

  $.fn.miniPreview = function(options) {
    return this.each(function() {
      var $this = $(this);
      var miniPreview = $this.data(PREFIX);
      if (miniPreview) {
        miniPreview.destroy();
      }

      miniPreview = new MiniPreview($this, options);
      miniPreview.generate();
      $this.data(PREFIX, miniPreview);
    });
  };

  var MiniPreview = function($el, options) {
    this.$el = $el;
    this.$el.addClass(PREFIX + '-anchor');
    this.options = $.extend({}, this.defaultOptions, options);
    this.counter = MiniPreview.prototype.sharedCounter++;
  };

  MiniPreview.prototype = {
    sharedCounter: 0,

    defaultOptions: {
      width: 256,
      height: 144,
      scale: .25,
      prefetch: 'parenthover'
    },

    generate: function() {
      this.createElements();
      this.setPrefetch();
    },

    createElements: function() {
      var $wrapper = $('<div>', {
        class: PREFIX + '-wrapper'
      });
      //no need to use iframe...use simple div 
      var $frame = $('<div>', {
        class: PREFIX + '-frame'
      });
      var $cover = $('<div>', {
        class: PREFIX + '-cover'
      });
      $wrapper.appendTo(this.$el).append($frame, $cover);

      // sizing
      $wrapper.css({
        width: this.options.width + 'px',
        height: this.options.height + 'px'
      });

      // scaling
      var inversePercent = 100 / this.options.scale;
      $frame.css({
        width: inversePercent + '%',
        height: inversePercent + '%',
        transform: 'scale(' + this.options.scale + ')'
      });
      var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
      var top = (this.$el.height() + fontSize) / 2;
      var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
      //add more style here ...if needed to outer div
      $wrapper.css({
        top: top + 'px',
        left: left + 'px',
        'font-size': '55px',
        'color': 'blue'
      });
    },

    setPrefetch: function() {
      switch (this.options.prefetch) {
        case 'pageload':
          this.loadPreview();
          break;
        case 'parenthover':
          this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
            this.loadPreview.bind(this));
          break;
        case 'none':
          this.$el.one(this.getNamespacedEvent('mouseenter'),
            this.loadPreview.bind(this));
          break;
        default:
          throw 'Prefetch setting not recognized: ' + this.options.prefetch;
          break;
      }
    },

    loadPreview: function() {
      //to get text from p tag
      var data_to_show = this.$el.closest('p').clone().children().remove().end().text().trim()
      //set new text inside div frame
      this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
      //set bg color..
      this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');


    },

    getNamespacedEvent: function(event) {
      return event + '.' + PREFIX + '_' + this.counter;
    },

    destroy: function() {
      this.$el.removeClass(PREFIX + '-anchor');
      this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
      this.$el.off(this.getNamespacedEvent('mouseenter'));
      this.$el.find('.' + PREFIX + '-wrapper').remove();

    }
  };
})(jQuery);


$('a').miniPreview();

body {
  height: 100%;
  margin: 0;
  padding: 0 10% 40px;
  font-size: 2rem;
  line-height: 1.5;
  font-family: 'Roboto Slab', sans-serif;
  text-align: justify;
  color: #59513f;
  background-color: #f5ead4;
}

a {
  color: #537f7c;
}

.mini-preview-anchor {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.mini-preview-wrapper {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  margin-top: -4px;
  border: solid 1px #000;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
  transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}

.mini-preview-anchor:hover .mini-preview-wrapper {
  z-index: 2;
  opacity: 1;
  margin-top: 6px;
  transition: opacity .3s, margin-top .3s;
}

.mini-preview-cover {
  background-color: rgba(0, 0, 0, 0);
  /* IE fix */
}

.mini-preview-frame {
  border: none;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div class="paragraph">
    <p>
      <a id="anchor_1">See</a> This is text we are showing for first
    </p>
    <p>
      <a id="anchor_2">See</a> This is text we are showing for second
    </p>
  </div>
</body>

</html>

更新 1 :

您可以使用一些 class 区分外部和内部 link 即：只需检查悬停的 a 标签是否具有特定的 class 或不依赖在此更改您的代码以预览 divs.

更新代码 :

if (this.$el.hasClass("internal")) {
        //to get text from p tag
        var data_to_show = this.$el.closest('p').siblings(".paragraph").clone().text().trim()
        //set new text inside div frame
        this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
        //set bg color..
        this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');
} else {       
        console.log("for external code ..")    
}

Minipreview jQuery link 仅预览父 <p> 或 <div> 的内容

Minipreview jQuery link preview contents of parent <p> or <div> only

html

javascript

css

jquery

api-linkpreview