Grab Content from another page with jquery

Asked

Viewed 2,996 times

1

I want to create a way to open this page of Sptrans in an app, but without loading all their layout, only the fields: LOGIN, PASSWORD and REGISTER, using only HTML and JQUERY.

The elements I need are these:

<input type="text" id="vUSRLOGA" name="vUSRLOGA" value="" size="20" maxlength="20" class="Atributo_LOV" style=";height: 1row;text-align:left" onfocus="gx.evt.onfocus(this, 21,'',false,'',0)" onchange="gx.evt.onchange(this)" onblur="this.value=this.value.toUpperCase();;gx.evt.onblur(21);">

<input type="password" id="vUSRSEN" name="vUSRSEN" value="" maxlength="32" class="Atributo_LOV" style=";width: 128px;;height: 1row;text-align:left" onfocus="gx.evt.onfocus(this, 23,'',false,'',0)" onchange="gx.evt.onchange(this)" onblur="this.value=this.value.toUpperCase();;gx.evt.onblur(23);">

<input type="image" src="Resources/cadastrese.gif" name="BTCADASTRO1" onclick="if( gx.evt.jsEvent(this)) {gx.evt.execEvt('E\'CADASTRO\'.',this);return false;} else return false;" id="BTCADASTRO1" title="Efetuar Novo Cadastro" class="Image" onfocus="gx.evt.onfocus(this, 47,'',false,'',0)">

I’ve tried it this way, searching for the element ID

$.ajax({
    url: 'http://www.sptrans.com.br/sac/solicitacoes.aspx',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('vUSRLOGA'); 
        $("#conteudo").html(headline);
    }
});

and thus searching the entire page.

$.ajax({
            url: 'http://www.sptrans.com.br/sac/solicitacoes.aspx',
            type: 'GET',
            success: function(res) {
                var headline = $(res.responseText).text();
                $("#conteudo").html(headline);
            }
        })

but in none of them brings the fields, only the texts of the page.

What I want would be to store the site in a variable and present to the user, only the login fields, password and register.

But I don’t know how to do it, does anyone know? without using other languages, only Jquery.

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
<!-- Scripts Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script>

<script type="text/javascript">
/*$.ajax({
            url: 'http://www.sptrans.com.br/sac/solicitacoes.aspx',
            type: 'GET',
            success: function(res) {
                var headline = $(res.responseText).text();
                $("#conteudo").html(headline);
            }
        });*/

        $.ajax({
    url: 'http://www.sptrans.com.br/sac/solicitacoes.aspx',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('vUSRLOGA'); 
        $("#conteudo").html(headline);
    }
}); 

</script>


<title>Teste</title>
<body>




    <div id="conteudo" style="background:#EEF0A6"></div>


</body>
</html>

Imagem

javascript jquery html html5 xhtml

  • An Iframe would solve ?

1 answer

1


I don’t know if that’s the case, but I have an IFRAME that has that same idea:

as below, I have a screen that is from another site, I used the iframe that opens the site on the link knowledge portal, so inside everything is the domain of the other site

inserir a descrição da imagem aqui

Below the site Official inserir a descrição da imagem aqui

Follow example source code:

<style>
    #fieldsetFazenda {
        display: none;
        left: 1360px;
        position: relative;
        top: -679px;
        width: 500px;
    }
    #chave {
        background: #eeeeee none repeat scroll 0 0;
        font: bold 15pt Arial;
        height: 240px;
        position: absolute;
        text-align: center;
        width: 770px;
    }
    #div-fazenda {
        overflow: hidden;
    }
    
#fazenda {
    border: 1px none;
    height: 1360px;
    margin-top: 10px;
    overflow: hidden;
    width: 768px;
}
</style>
        <legend class="ui-widget ui-widget-header ui-corner-all">Conhecimento Eletronico</legend>          
        <div id="chave">
            <p id="palavra-chave">Chave de Acesso para a consulta:</p>
            <strong id="chaveAcesso" class="auto">0000000000000000000000000000000000</strong>
        </div>
        <div id="div-fazenda">
            <iframe id="fazenda" src="http://www.cte.fazenda.gov.br/consulta.aspx?tipoConsulta=completa&amp;tipoConteudo=mCK/KoCqru0="></iframe>    
        </div>

  • Do you have a template to pass me? I will test it here, but it excludes all the rest of the Layout and presents only the part that interests you?

  • I edited the answer and put an example of Iframe

  • Thank you, not quite what I needed, but I’ll save this example for future consultations... I think what I want to do is harder than I thought

Browser other questions tagged javascript jquery html html5 xhtml

You are not signed in. Login or sign up in order to post.