Question

在我们的用户控件中，对于Web应用程序，我们所做的是我们实际使用Javascript来呈现Twitter推荐列表 https://dev.twitter.com/docs/embedded-timelines

但是，我们想要做一些自定义，比如删除头像和其他一些东西。以下是示例代码段

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" style="border: none; max-width: 100%; min-width: 180px;" title="Twitter Timeline" width="300" height="381">

<html><head><style type="text/css">body{display:none}</style><base target="_blank"><link type="text/css" rel="stylesheet" href="http://platform.twitter.com/embed/timeline.633fdd7a8cbe780bedb23434c948fe33.default.css">


<div class="timeline-footer" data-scribe="section:footer">
  <a class="tweet-box-button web-intent" href="https://twitter.com/intent/tweet?screen_name=TheMarilynShow" data-scribe="element:timeline_permalink">Tweet to @TheMarilynShow</a>
</div>
</div></body></html>
</iframe>

现在，让我们说如果我想对div class =“timeline-footer”做CSS样式，那么这可能是由Twitter托管，而不是我们。是否有可能在我们的客户端代码上使用JQuery来定位它？

请告知。

Answer 1

你不需要JQuery来定位它....你只需要使用一个好的和健壮的CSS选择器，你只需要跟踪他的类名并制作更有效的选择器，如：

#twitter-widget-0 .timeline-footer {
  ...../*your properties*/
}

PD：也作为最后一个资源使用!important声明。

Answer 2

要使用jQuery访问iframe中的元素，您可以向iframe添加name属性，例如<iframe name="iframe1"></iframe>并使用

$('div.timeline-footer', window.frames["iframe1"].document).css('font-weight', 'bold');

这假设您的iframe src与父窗口位于相同的域/端口/协议上。否则这是不可能的

如何使用JQuery在<iframe>中定位<div>？</iframe> </div>

2 个答案: