0

vou apresentar meu código de teste resumido para melhor entendimento.

index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Teste</title>    
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

script.js

function init() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//externo.com/js/encurtador.js';
    document.body.appendChild(script);
}

window.addEventListener("DOMContentLoaded", init);

encurtador.js (externo, não possuo acesso ao arquivo)

document.addEventListener("DOMContentLoaded", function(e) {
    // Codigo que faz a analise de todas tags <a> e insere o url encurtado
});

Meu Problema

Estou tentando carregar um script externo no qual ele também faz o uso do 'DOMContentLoaded'.

Pelo meu entendimento (me perdoa se estiver equivocado) é que quando o script externo é inserido no final do <body> o DOM já esta concluído, e devido a esse motivo o script externo não consegue executar sua funcionalidade.

  • Você deve esta se perguntando o motivo deu esta querendo fazer isso, invés de simplesmente adicionar o script direto a página?

É que pretendo deixar aleatório essa inserção , será digamos (5 links) de varias empresas diferentes de encurtador, será controlado por cookies quando usar um ou outro.

Desculpe se não consegui explicar claramente minha dúvida, posso tentar ser mais detalhado enquanto a duvidas de vocês caso não tenha entendido algo. Agradeço de coração quem conseguir me ajudar, muito obrigado :)

2
  • Já que está usando PHP, não seria mais fácil fazer isso com ele?
    – Costamilam
    Commented 3/09/2018 às 20:50
  • Opa @GuilhermeCostamilam , minha pagina de teste é em .php rodando em um servidor apache localhost , porem no lugar que vai rodar é somente pagina .html, tambem gostaria de saber se existe alguma correção para resolver o problema utilizando somente o javascript. Muito obrigado pelo comentário :)
    – JeFF - JXG
    Commented 3/09/2018 às 20:55

2 Respostas 2

1

Tens razão, o problema é que quando o ficheiro encurtador.js é incluido, o evento DOMContentLoaded já foi disparado, logo o novo script nunca vai ser triggered.

Felizmente isto é tudo javascript, e há sempre forma de dar a volta.

Podes criar tu o evento DOMContentLoaded artificialmente e dispara-lo num elemento (neste caso o document).

Provavelmente terás de confirmar que o <script> inserido dinamicamente já foi carregado (depois de ser inserido na página), e há algumas formas de fazer isso, mas para disparar o DOMContentLoaded, podes usar

var domContentLoadedEvent = new Event('DOMContentLoaded');
document.dispatchEvent(domContentLoadedEvent)

Isso dispara o DOMContentLoaded no document, fazendo com que o script agora carregado o apanhe e seja executado.

Detectando que o script foi carregado

Como estás a carregar o ficheiro dinamicamente, podemos colocar um evento a escuta de quando o ficheiro acabou de carregar para disparar o evento DOMContentLoaded

function triggerDOMContentLoaded() {
    var domContentLoadedEvent = new Event('DOMContentLoaded');
    document.dispatchEvent(domContentLoadedEvent);
}

function init() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//externo.com/js/encurtador.js';

    // podes usar a propriedade onload
    script.onload = triggerDOMContentLoaded;

    // ou um addEventListener, no entanto, o exemplo acima encaixa melhor no estilo que já estás a seguir
    script.addEventListener('load', triggerDOMContentLoaded);

    document.body.appendChild(script);
}
5
  • Perfeito! @Leite, nem passou pela minha cabeça em criar uma nova instancia e aplicar ao document. Deixa só tirar última duvida contigo, eu fiz a confirmação pelo window.addEventListener('load', update); evento load , existe alguma forma mais elegante para confirmar se ele já foi carregado? porque pelo que eu verifiquei eu acho que fiz a confirmação que a pagina inteira foi carregada e não o script que eu inseri rsrsrs, muito obrigado pela ajuda :)
    – JeFF - JXG
    Commented 3/09/2018 às 22:27
  • Actualizei com uma pequena alteração para detectar quando o script foi carregado
    – Leite
    Commented 3/09/2018 às 22:43
  • Muito obrigado , a respeito de compatibilidade com o IE 9 e demais navegadores o new Event() funciona conforme esperado ou não ?
    – JeFF - JXG
    Commented 3/09/2018 às 22:46
  • Não, no IE9 (e talvez 10?) tens de usar o document.createEvent, podes usar algo assim (adiciona o return event no fim da função) stackoverflow.com/questions/26596123/…
    – Leite
    Commented 3/09/2018 às 22:53
  • Bacana , já fiz a adaptação aqui tbm , notei que tem incompatibilidade com o 'addEventListener' tambem necessitando fazer o uso 'attachEvent' , procede ? desculpa novamente em atrapalhar..
    – JeFF - JXG
    Commented 3/09/2018 às 23:27
0

use o if(statusTxt == "success")

function open_exec32(){ 
$("#exec32").load("../../sitecorp/modal/01/modalEffects.js", 
function(responseTxt, statusTxt, xhr){  if(statusTxt == "success") {alert();} else {} ;
}); 
};

o retorno funciona adapte ao seu projeto.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .