INSERIRE BASE Href con jquery

nicolawind

INSERIRE BASE Href con jquery

Buon di!
Non sarà facile ma provo a spiegare il mio problema!!!

1 - Nel mio sito, carico da una pagina HTML esterna, dei collegamenti ad immagini:

page html esterna ( previsioni in html ):[TABLE]

[TD="class: line-number"][/TD]
[TD="class: line-content"] <a style="color: red;fontsize:8pt" href="javascript:changeImage('/immagine1111.....................GIF')">2016-03-07 03:00 <br></a>[/TD]
[/TR]

[TD="class: line-number"][/TD]
[TD="class: line-content"] <a style="color: red;font-size:8pt" href="javascript:changeImage('/immagine2222.....................GIF')">2016-03-07 06:00 <br></a>

Attenzione, la pagina però contiene collegamenti relativi    **href="/immagine1111..............GIF"** , per tanto ho pensato ad un tag base.
<BASE HREF=".........it">

[/TD]
[/TR]

[TD="class: line-number"][/TD]
[TD="class: line-content"]2 - Il href delle immagini, essendo previsioni meteo, cambia giorno per giorno, quindi ho necessità non di collegarmi semplicemente alle immagini staticamente, ma di caricarle nel mio sito, attraverso l'attributo _get della pagina html che li contiene.
Quindi carico i link nel seguente modo e li inserisco in un "menu0":

<a href="javascript:menufunc('menu0')"><p style="">Calendario<br></p></a>
<div id="menu0" style="">
<?php echo file_get_contents('...........it/previsioni.html'); ?>
</div>

3 - Una volta caricati, attraverso lo script, imposto le azioni:[/TD]
[/TR]
[/TABLE]
function startmenu()

{
document.getElementById('menu0').style.display = "none";
}

function menufunc(menuId)

{

if(document.getElementById(menuId).style.display == "none")


{


    startmenu();


    document.getElementById(menuId).style.display = "block";
            
            $('#menu0 a').css('font-size', '1em').css('color', '#3F576A').css('line-height', '2.2em')
                          .css('font-family', 'Arial').css('text-decoration', 'none');

$(document).ready(function() {
$('a').bind("mouseover", function(){
var color = $(this).css("color");

        $(this).css("color", "red");


        $(this).bind("mouseout", function(){
            $(this).css("color", color);
        })    
    })    
})
           


}
else

{

startmenu();
}
}

function changeImage(filename)
{
document.getElementById('mainimage').src = filename;
}

</script>

**in questa parte finale in rosso, imposto dove mostrare le immagini e come caricarle.

**
Il tutto funziona perfettamente!
Io però non contento, volevo sostituire il tag BASE, inserendo all'interno dello script una funzione che mi trasformasse i collegamenti relativi della pagina html, in assoluti!!!
Sono 10 giorni che ci sto provando in tutte le maniere....niente da fare!!
Spero di essermi riuscito a spiegare decentemente!!
qualcuno mi sa dire dove posso trovare qualcosa di attinente???
Vi ringrazio sin da subito per l'aiuto!

ps: ho provato inserendo la var base ma niente:

var base = document.createElement('base');
base.href = ' ........it/';
document.getElementsById('mainimage')[0].appendChild(base);

miwebdesign

Ciao nicolawind,

devo dire che la tua esposizione non è proprio molto chiara, ma comunque credo di aver capito che cosa ti serve.

Per cambiare i tuoi url relativi in assoluti uno per uno, devi creare un ciclo in questa maniera ( $("#selettore a") sarà il tuo selettore di riferimento per ogni tag href relativo, cambialo in base al tuo codice


<script>
var path = "http://www.ilmiopercorso.it";
$("#selettore a").each(function(){
var url = $(this).attr("href");
$(this).attr("href",path+url);
})
</script>

Questo piccolo script ti aggiunge il prefisso del tuo url assoluto ad ogni attributo href del selettore scelto.

nicolawind

ho provato tutte le salse...ma niente da fare......posto il codice usato!

miwebdesign

C'eri quasi, hai sbagliato solo una cosa. Questo è il sorgente:


<div id="selettore">
<a href="/percorsorelativo.htm"> prova </a>
  <a href="/percorsorelativo.htm"> prova </a>
  <a href="/percorsorelativo.htm"> prova </a>
  <a href="/percorsorelativo.htm"> prova </a>
</div>
<script>
var path = "ilmiopercorso.it";
$("#selettore a").each(function(){
  var url = $(this).attr("href");
  $(this).attr("href",path+url);
})
</script>

Ovviamente prima di questo script devi aver incluso jQuery, sennò non funziona.

Questo è un pen funzionante: http://codepen.io/anon/pen/NNrMBW

nicolawind

Grazie mille ....purtroppo colpa mia...non è quello che cercavo! uffi
Ci riprovo.
Allora, con <?php echo file_get_contents('paginaesterna.html'); ?>, carico l'elenco di immagini, però le immagini non si vedono a schermo perchè l'src è un percorso relativo, quindi i tag immagini ci sono nella pagina, ma non si vedono a video, la lista delle immagini insomma, è di questo genere:
<img src="/immagine1.gif">
<img src="/immagine2.gif">
<img src="/immagine3.gif">
Per far sì che le immagini si vedano a video ho usato un tag <base href="paginaesterna.html'>. Tutto funziona.

Io vorrei evitare di usare il tag base href, in quanto ovviamente, tutti i collegamenti cambiano la url modificata dal tag base.

Un altra possibilità che ho provato è la seguente:
<?php define('BASE_URL', 'paginaesterna.html');?>
<img src="<?php echo BASE_URL; ?>percorsorelativoimmagine.gif" />

però nel mio caso specifico che carico le immagini con <?php echo file_get_contents('paginaesterna.html'); ?>non funziona.
Quello che vorrei fare è inserire il tag base a tutta la lista di immagini che carico da una fonte esterna del mio sito.
Grazie ancora!

miwebdesign

Beh il codice che ti ho postato fà quello che dici, ma con il tag HREF anzichè SRC. Se mi posti il tuo output html specifico dei div con i tag img dentro ti posto lo script io, ma prima provaci tu.
Adesso sai che il funzionamento essenzialmente è quello dello script che ti ho postato, devi solo personalizzarlo.

Poi un'altra cosa, scegli: Se farlo in Javascript o PHP, sono due cose diverse.. la soluzione che mi hai chiesto era in Javascript.

nicolawind

Ti chiedo scusaaaaaaaaaa! Hai ragione....

Funziona benissimo!!!
Come libreria ho usato quella presa dal pen funzionante che mi hai postato!!!
Veramente mille grazie, adesso posso procedere con i lavori!
Sto creando una pagina meteo con le previsioni per uso personale!! Se vuoi poi posto il codice completo che possa aiutare altri!
Grazie ancora

nicolawind

ciao miwebdesign
ho ripreso questa discussione.....
dopo essere riuscito ad elaborare quello che volevo grazie al tuo prezioso aiuto, altrimenti non ci sarei mai riuscito....
ho necessità di capire perchè il lavoro svolto non funziona più.
posso postare il codice completo???

di seguito il codice:
<title>Previsioni dell'Onda in Italia | TanaOnda</title>

</style>

<div id="loading_screen">
<h1>Loading...</h1>
<p>Pagina in caricamento!<br/>
</p>
</div>
<script type="text/javascript">
mostra_loading_screen();
</script>

<a href="https://www.tanaonda.it/index_file/meteo/ondaitalia.php" target="_top">
<div style="width:20%;float:left;border:2px solid;border-color:#999;">
<p>Full Screen >></p></div></a>

</div>
<div style="clear:both"> </div>

praticamente, le immagini non mi vengono più mostrate.
la pagina di riferimento è tanaonda.it/meteo.php