Question

我正在为浏览器游戏创建一个Chrome扩展程序，我要添加的功能之一是在游戏右侧浮动的“来自论坛的最新帖子”窗口。我已经显示了它想要的方式，但是，从论坛拉出的所有链接都被缩短了，并且不包含完整的URL。当我单击链接之一时，它会尝试转到游戏网站而不是论坛网站上的该页面。我想要的是代码来修复URL并添加目标空白属性，以便链接在新页面/选项卡中打开。我现有的代码如下。

$(function(){
    var hzsforumpostsss = document.getElementById('latestpostsHZ');
    hzsforumpostsss.insertAdjacentHTML('afterend', '<div><div id=\"hzlatestforumss\" style=\"background-color: rgba(0, 110, 187, 0.9);position:absolute;left:50%;width:280px;margin-left:390px;font-size:9pt;display:block;overflow:auto;\"></div></div>');
    $('#hzlatestforumss').load('https://cors-anywhere.herokuapp.com/http://heroes-rising-forum.2349640.n4.nabble.com/');
})

Answer 1

由于您只是使用AJAX将内容直接加载到div中，因此需要遍历div中的所有链接，并将主机名添加到相对的主机名之前。 jQuery和Vanilla JS的混合使用会让人有些困惑，但是我将坚持使用Vanilla JS作为示例代码。

[...document.getElementById('hzlatestforumss').getElementsByTagName('a')].forEach(anchor => {
  if (anchor.href && !anchor.href.includes('://')) {
    if (!anchor.href.startsWith('/')) { anchor.href = '/' + anchor.href; }
    anchor.href = 'http://heroes-rising-forum.2349640.n4.nabble.com' + anchor.href;
  }
});

如果需要，还可以在同一循环中添加_blank目标。

Answer 2

谢谢您让我走上正轨！我最终得到的代码如下。

$(function(){
    var hzsforumpostsss = document.getElementById('latestpostsHZ');
    hzsforumpostsss.insertAdjacentHTML('afterend', '<div><div id=\"hzlatestforumss\"'+
    'style=\"background-color: rgba(0, 110, 187, 0.9);position:absolute;left:50%;width:280px;margin-left:390px;display:block;overflow:auto;\"></div></div>');
    $('#hzlatestforumss').load('https://cors-anywhere.herokuapp.com/http://heroes-rising-forum.2349640.n4.nabble.com/');
    setTimeout(function(){
    $('a[href*="/"]').each(function(){
    var current = $(this).attr("href");
    $(this).attr("href", "http://heroes-rising-forum.2349640.n4.nabble.com" + current);
    $(this).attr("target", "_blank");
    });
    },2000);
})

Answer 3

像这样吗？

$(function(){
    var hzsforumpostsss = document.getElementById('latestpostsHZ');
    hzsforumpostsss.insertAdjacentHTML('afterend', '<div class="HideFJcontainer" style=\"position:absolute;left:50%;width:280px;margin-left:390px;display:block;overflow:auto;\">'+
    '<input type="checkbox" class="HideFJforum">&nbsp;Hide/Show Forum<div id=\"hzlatestforumss\"></div></div>');
    $('#hzlatestforumss').load('https://cors-anywhere.herokuapp.com/http://heroes-rising-forum.2349640.n4.nabble.com/',
    function(){
    $('a[href*="/"]').each(function(){
    var current = $(this).attr("href");
    $(this).attr("href", "http://heroes-rising-forum.2349640.n4.nabble.com" + current);
    $(this).attr("target", "_blank");
    });
    } );

在缩短的链接之前添加其余URL

3 个答案: