2016-01-03 7 views
0

Здравствуйте Im пытается вставить некоторые интерактивный текст в мой блог, в котором всплывающийКак сделать интерактивный HTML-текст, который загружает <script>?

<script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=BvFE6&webforms_id=2645901"></script> 

появится. Как это сделать правильно? Благодаря

ответ

0

вы должны добавить сценарий к странице:

X.onclick = function(){ 
    var myScript = document.createElement('script'); 
    mySript.src='...'; 
    document.querySelector('head').appendChild(script); 
    } 
-1
<p class='appendScriptTag'> click me </p> 

<script> 

$('.appendScriptTag').on('click',function(){ 
    var s = document.createElement("script"); 
    s.type = "text/javascript"; 
    s.src = "https://app.getresponse.com/view_webform_v2.js?u=BvFE6&webforms_id=2645901"; 
    $("head").append(s); 
}) 

</script> 
-1

Мы можем использовать JQuery для добавления сценария во время выполнения, используя код ниже:

$("<script>", { 
    src: "https://app.getresponse.com/view_webform_v2.js?u=BvFE6&webforms_id=2645901", 
    type: "text/javascript" 
}).appendTo("body"); 

Мы можем использовать тот же сценарий на нажмите на элемент. См. Приведенный ниже код для рабочего примера.

<!doctype HTML> 
<html> 
<head> 
    <title>Append script on runtime</title> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <style type="text/css"> 
     #text-link { 
      color: blue; 
      cursor: pointer; 
     } 
    </style> 
</head> 
<body> 
<div id="blog-content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium sodales turpis. 
    <span id="text-link">fermentum lacinia</span> ligula. Aliquam erat volutpat. 
</div> 

<script type="text/javascript">  
    $(document).ready(function() { 
     $("#text-link").on("click", function() { 
      $("<script>", { 
       src: "https://app.getresponse.com/view_webform_v2.js?u=BvFE6&webforms_id=2645901", 
       type: "text/javascript" 
      }).appendTo("body"); 
     }); 
    }); 
</script> 

</body> 
</html> 
+0

Откуда вы знаете, что они используют jquery? – birdoftheday

0

Если требование не позволяет использовать JQuery, то вы также можете использовать JavaScript для добавления сценария во время выполнения, используя код ниже:

<!doctype HTML> 
<html> 
<head> 
    <title>Append script on runtime</title> 
    <style type="text/css"> 
     #text-link { 
      color: blue; 
      cursor: pointer; 
     } 
    </style> 
</head> 
<body> 
<div id="blog-content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium sodales turpis. 
    <span id="text-link">fermentum lacinia</span> ligula. Aliquam erat volutpat. 
</div> 

<script type="text/javascript">  
    window.onload = function() { 

    document.getElementById("text-link").addEventListener("click", addScript); 

    function addScript(){ 
     var script = document.createElement('script'); 
     script.src = 'https://app.getresponse.com/view_webform_v2.js?u=BvFE6&webforms_id=2645901'; 
     document.head.appendChild(script); 

     // if wants to support IE < 9 then instead of document.head use 
     // document.getElementsByTagName('head')[0] 
    } 

    } 
</script> 

</body> 
</html> 

Вы можете дополнительно улучшить код, чтобы добавить его только один раз, если он уже существует.

Смежные вопросы