javascript - カラーボックス: 別の HTML ページの一部のみを表示

Question

外部の HTML ページの一部だけをカラーボックスで開く必要があります。

このようにしてみましたが、指定した部分（id="content" の div で）のページ全体が開きます。

<a class="iframe" href=www.mypage.com #content" /> 

どのようにできるのか？

Answer 1

私はこの方法で解決しました：

$('.link-popup').on('click', function(e) {
  e.preventDefault();
  url = $(this).attr('href');
  $content = $('#popup');
  $content.load(url + " .content", function() {
    popup($content, "ajax");
  });
});

/* where popup is a custom function */

function popup(content, contentType) {
  $(content).bPopup({
    easing : 'easeOutBack', // uses jQuery easing plugin
    speed : 500,
    transition : 'slideDown',
    content : contentType, // 'ajax', 'iframe' or 'image'
  });   
}

Answer 2

div が常に同じ位置にある場合は、iframe の位置を設定するだけです。これは私のサイトのロゴです。

<div id="divContainer" style="position: absolute; left: 50px; top: 90px; border: solid 2px #000;">
<div id="frameContainer" style="overflow:hidden;">
    <iframe src="http://www.refficient.com" scrolling="no" style="width: 325px; height: 125px; margin-top: -40px;">
    </iframe>
</div>
</div>​

http://jsfiddle.net/calder12/Y8bzf/

それ以外に、外部サイトのコンテンツを取得し、dom を解析して div のコンテンツを見つけることもできますが、それはかなりの作業になります。

Answer 3

jQueryでそれを行うことができます：

    $('#result').load('http://www.mypage.com #container');