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

【问题标题】：How To Target a <div> inside an <iframe> using JQuery?如何使用 JQuery 在 <iframe> 中定位 <div>？
【发布时间】：2014-04-10 07:42:08
【问题描述】：

在我们的用户控件中，对于 web 应用程序，我们实际上使用 Javascript 来呈现 Twitter 建议的 Twitter 提要列表 https://dev.twitter.com/docs/embedded-timelines

但是，我们想做一些自定义，比如删除头像和其他一些事情。这是示例 sn-p

<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 来定位它？

请指教。

【问题讨论】：

如果您知道所使用的类，您可以尝试使用 CSS，并且您可以将 postmessages 发送到 iframe，您可以在 iframe 内接收和处理该 iframe，但除此之外您无法控制 iframe 内容。
你为什么不使用像hellojs 这样的第三方插件通过json 获取数据并像你一样构建用户界面？
iframe URL 是否与主文档在同一个域中？

标签： jquery css iframe

【解决方案1】：

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

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

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

【讨论】：

不，IFRAME 位于不同的域中。它由 Twitter 托管，而不是我们。

【解决方案2】：

你不需要 JQuery 来定位这个......你只需要使用一个好的和强大的 CSS 选择器，你所需要的只是跟踪他的类名并制作更高效的选择器，例如：

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

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

【讨论】：