javascript - 颜色框：仅显示另一个 html 页面的一部分

Question

我必须在颜色框中只打开外部 html 页面的一部分。

我尝试过这种方式，但它会在指定部分打开整个页面（在 id="content" 的 div 处）：

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

我能怎么做？

Answer 1

如果 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 2

你可以用 jQuery 做到这一点：

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

Answer 3

我以这种方式解决了：

$('.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'
  });   
}