Javascript Bookmarklet - 在页面上打开多个链接

发布于 2024-08-28 12:57:43 字数 6676 浏览 3 评论 0原文

我想制作一个小书签,这样当我进入 Digg 时,我只需单击它即可在新选项卡中打开前 10 篇故事。

页面上的 HTML 如下所示:

<div id="topten-list">
  <div class="news-summary img-thumb">
    <h3>
      <a href="/comics_animation/Pokemon_COMIC">Pokemon - (COMIC) 
      <span>
        <em style="background-image: url(&quot;/comics_animation/Pokemon_COMIC/a.png&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/comics_animation/Pokemon_COMIC">
          <strong>1872</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary img-thumb">
    <h3>
      <a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">
      I am never drinking with you assholes again [Pic] 
      <span>
        <em style="background-image: url(&quot;/comedy/I_am_never_drinking_with_you_assholes_again_Pic/a.png&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">

          <strong>1650</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/comedy/xkcd_Hell">xkcd: Hell 
      <span>
        <em style="background-image: url(&quot;/comedy/xkcd_Hell/a.png&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/comedy/xkcd_Hell">
          <strong>1407</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">
      6 Ridiculous History Myths (You Probably Think Are True) 
      <span>
        <em style="background-image: url(&quot;/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True/a.jpg&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">

          <strong>1216</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">
      Why Every Chick Flick Is Starting to Look The Same [CHART] 
      <span>
        <em style="background-image: url(&quot;/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART/a.jpg&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">

          <strong>978</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary img-thumb">
    <h3>
      <a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">WTF
      World of FAST FOOD! [Graphic] 
      <span>
        <em style="background-image: url(&quot;/food_drink/WTF_World_of_FAST_FOOD_Graphic/a.jpg&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">
          <strong>874</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">
      10 Things You Don&#39;t Know About My Life As a Dominatrix 
      <span>
        <em style="background-image: url(&quot;/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix/a.jpg&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">

          <strong>751</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary img-thumb">
    <h3>
      <a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">Star
      Trek Transporter Mishap (pic) 
      <span>
        <em>thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">
          <strong>667</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary vid-thumb">
    <h3>
      <a href="/pc_games/StarCraft_2_Beta_Breakup_Video">StarCraft
      2 Beta Breakup (Video) 
      <span>
        <em style="background-image: url(&quot;/pc_games/StarCraft_2_Beta_Breakup_Video/a.jpg&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/pc_games/StarCraft_2_Beta_Breakup_Video">
          <strong>627</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">
      Jon Stewart: FL Doc Won&#39;t Touch Yr Penis If You Voted
      Obama 
      <span>
        <em style="background-image: url(&quot;/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama/a.jpg&quot;);">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">

          <strong>508</strong>
        </a>
      </li>
    </ul>
  </div>
</div>

因此,在每个具有“news-summary”类的 div 中,都有一个链接。我怎样才能让javascript浏览div“topten-list”并打开每一个?

I want to make a bookmarklet so that when I go on Digg, I can simply click it and have the top 10 stories open up in new tabs.

The HTML on the page looks like this:

<div id="topten-list">
  <div class="news-summary img-thumb">
    <h3>
      <a href="/comics_animation/Pokemon_COMIC">Pokemon - (COMIC) 
      <span>
        <em style="background-image: url("/comics_animation/Pokemon_COMIC/a.png");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/comics_animation/Pokemon_COMIC">
          <strong>1872</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary img-thumb">
    <h3>
      <a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">
      I am never drinking with you assholes again [Pic] 
      <span>
        <em style="background-image: url("/comedy/I_am_never_drinking_with_you_assholes_again_Pic/a.png");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">

          <strong>1650</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/comedy/xkcd_Hell">xkcd: Hell 
      <span>
        <em style="background-image: url("/comedy/xkcd_Hell/a.png");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/comedy/xkcd_Hell">
          <strong>1407</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">
      6 Ridiculous History Myths (You Probably Think Are True) 
      <span>
        <em style="background-image: url("/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True/a.jpg");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">

          <strong>1216</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">
      Why Every Chick Flick Is Starting to Look The Same [CHART] 
      <span>
        <em style="background-image: url("/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART/a.jpg");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">

          <strong>978</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary img-thumb">
    <h3>
      <a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">WTF
      World of FAST FOOD! [Graphic] 
      <span>
        <em style="background-image: url("/food_drink/WTF_World_of_FAST_FOOD_Graphic/a.jpg");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">
          <strong>874</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">
      10 Things You Don't Know About My Life As a Dominatrix 
      <span>
        <em style="background-image: url("/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix/a.jpg");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">

          <strong>751</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary img-thumb">
    <h3>
      <a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">Star
      Trek Transporter Mishap (pic) 
      <span>
        <em>thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">
          <strong>667</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary vid-thumb">
    <h3>
      <a href="/pc_games/StarCraft_2_Beta_Breakup_Video">StarCraft
      2 Beta Breakup (Video) 
      <span>
        <em style="background-image: url("/pc_games/StarCraft_2_Beta_Breakup_Video/a.jpg");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/pc_games/StarCraft_2_Beta_Breakup_Video">
          <strong>627</strong>
        </a>
      </li>
    </ul>
  </div>
  <div class="news-summary news-thumb">
    <h3>
      <a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">
      Jon Stewart: FL Doc Won't Touch Yr Penis If You Voted
      Obama 
      <span>
        <em style="background-image: url("/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama/a.jpg");">
        thumb</em>
      </span></a>
    </h3>
    <ul class="news-digg">
      <li class="digg-count">
        <a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">

          <strong>508</strong>
        </a>
      </li>
    </ul>
  </div>
</div>

So within each div with the class "news-summary", there is a link. How can I get javascript to go through the div "topten-list" and open each one?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

心如狂蝶 2024-09-04 12:57:43

我更喜欢使用 jQuery

,但要在外部站点上应用它,请尝试这个(提示我从上一个线程复制粘贴)
我建议创建一个包含两个 iframe 的页面,一个用于导航到指定网站,另一个用于获取 DOM 对象。
在第一个导航到该站点,然后选择其 HTML 并
将其附加到第二个 Iframe 的正文中。

iframe2.contentWindow.document.body.innerHTML = iframe1.contentWindow.document.body.innerHTML

然后在第二个 iframe 中,您将加载 jquery 脚本,并且可以运行此代码。

$("news-summary img-thumb").find("news-digg").find("a").each(
function()
{
window.open(window.location + $(this).attr("href"));
}
)

告诉我进展如何

I would prefer to use jQuery

but to apply it on external site try this (hint i copy paste from my prev thread)
I suggest to create a page with two iframes one to navigate to the designated website and other to get DOM Objects.
in the first one navigate to the site and then select its HTML and
append it in the body of the second Iframe.

iframe2.contentWindow.document.body.innerHTML = iframe1.contentWindow.document.body.innerHTML

then in the second iframe you will have the jquery script loaded and you can run this code.

$("news-summary img-thumb").find("news-digg").find("a").each(
function()
{
window.open(window.location + $(this).attr("href"));
}
)

tell me how it goes

风轻花落早 2024-09-04 12:57:43

解决方案是这样的:我创建了一个 Javascript for 语句,该语句循环遍历 topten-list div 并选择所有名为“a”的标签。

最后的书签是这样的:

javascript:for(i=0;i<=18;i=i+2){window.open(document.getElementById('topten-list').getElementsByTagName('a')[i]);}

Ta-da!

The solution was this: I created a Javascript for statement which looped through the topten-list div and selected all tags named 'a'.

The final bookmarklet is this:

javascript:for(i=0;i<=18;i=i+2){window.open(document.getElementById('topten-list').getElementsByTagName('a')[i]);}

Ta-da!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文