无法运行在head标签中动态添加的javascript文件

问题描述 投票:0回答:1

脚本代码位于下面(head标记中的第二个脚本)。该脚本(脚本)具有其他代码,可在头文件中动态添加JS脚本,该脚本不起作用。

所以基本上,每当我单击导航栏项目时,都应运行特定的javascript(这不会发生),这样可以减少加载时间。

$(document).ready(function() {

  $(".navbar-nav").on('click', '.nav-item', function(ev1) {
    console.log("workingtech");
    console.log(ev1.target);
    if ($(ev1.target).is("#techpagelink")) { //If this target is clicked the below script should be added to head and be executed. 

      var $techscript = $("<script>").attr({
        "type": 'text/javascript',
        src: '/js/flikfeedtech.js'
      });
      eval($('head').prepend($techscript));
    } else if ($(ev1.target).is("#politicspagelink")) { //If this target is clicked the below script should be added to head and be executed.

      var $politicsscript = $("<script>").attr({
        "type": 'text/javascript',
        src: '/js/flikfeedpoliticsjs.js'
      });
      eval($('head').prepend($politicsscript));
    } else if ($(ev1.target).is("#movtvpagelink")) { //If this target is clicked the below script should be added to head and be executed.

      var $moviesscript = $("<script>").attr({
        "type": 'text/javascript',
        src: '/js/flikfeedmoviesjs.js'
      });

      eval($('head').prepend($moviesscript));
    }

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async type="text/javascript" src="/js/flikfeedjs.js"></script>
<script async type="text/javascript" src="/js/callscripts.js"></script> 


<body>
  <div class="navbar-nav">
    <a href="#foryoupage" class="nav-item nav-link active" id="#foryoupagelink">For You</a>
    <div></div>
    <a href="#techpage" class="nav-item nav-link hello " id="#techpagelink">Technology</a>
    <div></div>
    <a href="#politicspage" class="nav-item nav-link hello" id="#politicspagelink">Politics</a>
    <div></div>
    <a href="#movtvpage" class="nav-item nav-link hello" id="#movtvpagelink">Movies/Tv shows</a>
  </div>
</body>

flikfeedpoliticsjs.js代码

    $(document).ready(function(){
$.ajax({
            type: "GET",
            url: "https://cors-anywhere.herokuapp.com/https://www.asianage.com/rss_feed/?subsectionId=105",
            datatype: "xml",
            success: function(xml) {
                //console.log(xml);
                $(xml).find('item').each(function(i, j) {
                    title = $(j).find('title').text();
                    link = $(j).find('link').text();
                    description = $(j).find('description').text();
                    thumbnail = "/images/asianagethumb.jpg";
                    newsname = "The Asian Age";
                    logo = "https://www.asianage.com/images/logo.png";
                    articlestech(i, title, description, link, thumbnail, newsname, logo);

                });
            }
        });
    function articlestech(i, title, description, link, thumbnail, newsname, logo) {
            var $divitem = $("<div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');
            /* console.log("news18");
             console.log(thumbnail);
             console.log(typeof(thumbnail)); */
            var $divthumb = $("<div>").attr({ "class": 'thumbnail card', style: 'border: 1px solid transparent' }),
                $divcardheader = $("<div>").attr({ "class": 'card-header bg-transparent d-flex justify-content-start', style: 'border: 1px solid transparent' }),
                $divp21 = $("<div>").attr('class', 'p-2'),

                $imgthumb = $("<img>").attr({ "class": 'img-thumbnail ', 'style': 'align-content: center', 'src': logo, 'width': "35", 'height': "35" }),
                $divp22 = $("<div>").attr('class', 'p-2'),
                $pnewsname = $("<p>").text(newsname),
                $divmrauto = $("<div>").attr('class', 'mr-auto p-2'),
                $button = $("<button>").attr({ id: "tnie", class: "follow-button" }).text("+Follow"),

                $divimg = $("<div>").attr('class', 'img-event');

            if (newsname == "CineJosh") {
                var $imggrp = $("<img>").attr({ "class": 'group list-group-image img-fluid img-thumbnail', src: thumbnail, width: "254", height: "212" });
            } else {
                var $imggrp = $("<img>").attr({ "class": 'group list-group-image img-fluid img-thumbnail', src: thumbnail });
            }

            var $divcaption = $("<div>").attr('class', 'caption card-body'),
                $headcard = $("<h4>").text(title).attr('class', 'group card-title inner list-group-item-heading'),
                $paracard = $("<p>").attr('class', 'group inner list-group-item-text').text(description);

            var $divflex = $("<div>").attr('class', 'd-flex justify-content-end'),
                $divtime = $("<div>").attr({ "class": 'mr-auto p-2', 'id': 'time' }),
                $small = $("<small>").attr('class', 'text-muted').text('3 mins ago'),
                $divsvg = $("<div>").attr({ 'class': 'p-2', 'id': 'svgs' }),


                $svgcapa_1 = makeSVG('svg', { 'version': '1.1', 'id': "Capa_1", 'xmlns:xlink': "http://www.w3.org/1999/xlink", 'width': "24", 'height': "24", 'x': "0px", 'y': "0px", 'viewBox': "0 0 512 512", 'style': "enable-background:new 0 0 512 512;", 'xml:space': "preserve" }),

                $g1 = makeSVG('g', { 'id': 'g1' }),
                $g1path = makeSVG('g', { 'id': 'g1path' }),
                $path1 = makeSVG('path', { 'd': 'M346,0c-5.522,0-10,4.478-10,10v46c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10V10C356,4.478,351.522,0,346,0z' }),

                $g2 = makeSVG('g', { 'id': 'g2' }),
                $g2path = makeSVG('g', { 'id': 'g2path' }),
                $path2 = makeSVG('path', { 'd': 'M116,312c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10s10-4.48,10-10C124,316.48,121.52,312,116,312z' }),

                $g3 = makeSVG('g', { 'id': 'g3' }),
                $g3path = makeSVG('g', { 'id': 'g3path' }),
                $path3 = makeSVG('path', { 'd': 'M486,292c0-22.056-17.944-40-40-40h-74.652c11.557-29.603,16.235-64.447,15.333-95.464c-0.172-5.919-0.399-9.342-0.706-11.497C385.458,123.432,367.716,106,346,106c-22.056,0-40,17.944-40,40v10c0,63.246-81.214,98.781-142.504,114.019C158.862,259.425,148.284,252,136,252H36c-5.522,0-10,4.478-10,10v240c0,5.522,4.478,10,10,10h100c12.202,0,22.719-7.327,27.401-17.809c5.075,1.302,9.786,2.532,14.135,3.668C212.451,506.978,231.684,512,278.46,512H386c22.056,0,40-17.944,40-40c0-8.224-2.497-15.874-6.77-22.238C434.678,444.359,446,429.599,446,412c0-8.194-2.436-15.869-6.696-22.242C454.684,384.324,466,369.6,466,352c0-8.224-2.497-15.874-6.77-22.238C474.678,324.359,486,309.599,486,292z M146,482c0,5.514-4.486,10-10,10H46V272h90c5.514,0,10,4.486,10,10V482z M446,312c-21.449,0-24.562,0-50,0c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c11.028,0,20,8.972,20,20c0,11.046-8.954,20-20,20h-50c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c10.897,0,20,8.705,20,20c0,11.046-8.954,20-20,20c-21.449,0-24.562,0-50,0c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c11.028,0,20,8.972,20,20s-8.972,20-20,20H278.46c-44.207,0-61.473-4.509-95.87-13.492c-5.039-1.316-10.566-2.759-16.59-4.295V290.025C238.368,272.787,324,230.711,324,156v-10c0-11.028,8.972-20,20-20c11.008,0,19.979,8.958,20,19.969V146c0,4.346,5.424,57.683-16.324,106H316c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10c6.983,0,118.602,0,130,0c11.028,0,20,8.972,20,20C466,303.046,457.046,312,446,312z' }),




                $g4 = makeSVG('g', { 'id': 'g4' }),
                $g4path = makeSVG('g', { 'id': 'g4path' }),
                $path4 = makeSVG('path', { 'd': 'M116,352c-5.522,0-10,4.478-10,10v80c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10v-80C124,356.478,121.522,352,116,352z' }),

                $g5 = makeSVG('g', { 'id': 'g5' }),
                $g5path = makeSVG('g', { 'id': 'g5path' }),
                $path5 = makeSVG('path', { 'd': 'M246,124h-40c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h40c5.522,0,10-4.478,10-10C276,130.478,271.522,124,246,124z' }),

                $g6 = makeSVG('g', { 'id': 'g6' }),
                $g6path = makeSVG('g', { 'id': 'g6path' }),
                $path6 = makeSVG('path', { 'd': 'M466,124h-40c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h40c5.522,0,10-4.478,10-10C476,130.478,471.522,124,466,124z' }),


                $g7 = makeSVG('g', { 'id': 'g7' }),
                $g7path = makeSVG('g', { 'id': 'g7path' }),
                $path7 = makeSVG('path', { 'd': 'M437.921,44.079c-3.906-3.904-10.236-3.904-14.143,0l-28.279,28.279c-3.905,3.905-3.905,10.237,0,14.143c3.907,3.905,10.236,3.904,14.143,0l28.279-28.279C441.824,54.317,441.824,47.985,437.921,44.079z' }),


                $g8 = makeSVG('g', { 'id': 'g8' }),
                $g8path = makeSVG('g', { 'id': 'g8path' }),
                $path8 = makeSVG('path', { 'd': 'M296.501,72.358l-28.279-28.279c-3.906-3.904-10.236-3.904-14.143,0c-3.905,3.905-3.905,10.237,0,14.143l28.279,28.279c3.908,3.905,10.237,3.904,14.143,0C300.406,82.596,300.406,76.244,296.501,72.358z' }),

                $divsapce1 = $("<div>").attr({ 'class': 'p-2', id: 'space1' }),

                $svgCapa2 = makeSVG('svg', { 'enable-background': "new 0 0 512.54 512.54", 'height': "24", 'viewBox': "0 0 512.54 512.54", 'width': "24", 'xmlns': "http://www.w3.org/2000/svg", 'id': 'Capa2' }),

                $pathcapa20 = makeSVG('path', { 'd': 'm450.27 379.542h-29.536v-30.009c0-5.523-4.477-10-10-10s-10 4.477-10 10v30.009h-29.536c-5.523 0-10 4.477-10 10s4.477 10 10 10h29.536v30.009c0 5.523 4.477 10 10 10s10-4.477 10-10v-30.009h29.536c5.523 0 10-4.477 10-10s-4.477-10-10-10z' }),


                $pathcapa21 = makeSVG('path', { 'd': 'm482.151 318.124c-19.077-19.077-44.44-29.583-71.418-29.583-13.63 0-24.847 2.686-39.05 7.799v-176.7c0-7.314-2.848-14.191-8.019-19.361l-92.25-92.241c-2.159-2.159-4.673-3.922-7.399-5.244-.003-.002-.007-.003-.01-.005-.128-.062-.256-.125-.385-.186-.238-.116-.479-.224-.727-.321-3.407-1.469-7.106-2.242-10.849-2.242h-222.25c-15.958 0-28.94 12.982-28.94 28.94v454.66c0 15.958 12.982 28.94 28.94 28.94h312.95c15.279 0 27.97-11.946 28.892-27.197.012-.201.018-.402.018-.603v-2.072c12.467 5.213 25.772 7.824 39.08 7.824 25.864 0 51.728-9.845 71.418-29.535 39.379-39.379 39.379-103.456-.001-142.835zm-144.609-215.685h-66.082c-1.22 0-2.212-.993-2.212-2.213v-66.089zm14.111 381.944c-.404 4.594-4.271 8.157-8.91 8.157h-312.949c-4.93 0-8.94-4.01-8.94-8.94v-454.66c0-4.93 4.01-8.94 8.94-8.94h219.454v80.224c0 12.248 9.964 22.213 22.212 22.213h80.224v185.143c-4.355 3.151-8.493 6.666-12.368 10.541-39.38 39.38-39.38 103.456 0 142.836 3.887 3.887 8.017 7.384 12.338 10.503v12.921zm116.356-37.566c-31.581 31.582-82.97 31.582-114.551 0-31.582-31.582-31.582-82.969 0-114.551 15.299-15.299 35.64-23.724 57.275-23.724s41.977 8.425 57.275 23.724c31.583 31.582 31.583 82.969.001 114.551z' }),

                $pathcapa22 = makeSVG('path', { 'd': 'm71.32 159.38h139.414c5.523 0 10-4.477 10-10s-4.477-10-10-10h-139.414c-5.523 0-10 4.477-10 10s4.477 10 10 10z' }),

                $pathcapa23 = makeSVG('path', { 'd': 'm245.505 319.298h-174.185c-5.523 0-10 4.477-10 10s4.477 10 10 10h174.185c5.523 0 10-4.477 10-10s-4.477-10-10-10z' }),


                $pathcapa24 = makeSVG('path', { 'd': 'm245.505 379.271h-174.185c-5.523 0-10 4.477-10 10s4.477 10 10 10h174.185c5.523 0 10-4.477 10-10s-4.477-10-10-10z' }),

                $pathcapa25 = makeSVG('path', { 'd': 'm301.734 259.324h-230.414c-5.523 0-10 4.477-10 10s4.477 10 10 10h230.414c5.523 0 10-4.477 10-10s-4.478-10-10-10z' }),


                $pathcapa26 = makeSVG('path', { 'd': 'm70.32 220h180.414c5.523 0 10-4.477 10-10s-4.477-10-10-10h-180.414c-5.523 0-10 4.477-10 10s4.477 10 10 10z' }),

                $circle = makeSVG('circle', { cx: "300.5", cy: "210", r: "10.005" }),
                $divspace2 = $("<div>").attr({ 'id': "space2", 'class': "p-2" }),

                $svgCapa3 = makeSVG('svg', { 'id': "Capa3", 'xmlns': "http://www.w3.org/2000/svg", 'xmlns:xlink': "http://www.w3.org/1999/xlink", 'version': "1.1", 'x': "0px", 'y': "0px", 'viewBox': "0 0 58 58", 'style': "enable-background:new 0 0 58 58;", 'xml:space': "preserve", 'width': "24", 'height': "24" }),

                $gcapa1 = makeSVG('g', { 'id': 'gcapa1' }),
                $gcapapath = makeSVG('g', { 'id': 'gcapapath' }),
                $pathxy1 = makeSVG('path', { 'd': 'M54.319,37.839C54.762,35.918,55,33.96,55,32c0-9.095-4.631-17.377-12.389-22.153c-0.473-0.29-1.087-0.143-1.376,0.327   c-0.29,0.471-0.143,1.086,0.327,1.376C48.724,15.96,53,23.604,53,32c0,1.724-0.2,3.451-0.573,5.147C51.966,37.051,51.489,37,51,37   c-3.86,0-7,3.141-7,7s3.14,7,7,7s7-3.141,7-7C58,41.341,56.509,39.024,54.319,37.839z M51,49c-2.757,0-5-2.243-5-5s2.243-5,5-5   s5,2.243,5,5S53.757,49,51,49z', 'data-original': '#000000', 'class': "active-path", 'data-old_color': "#000000", 'fill': "#151313" }),

                $pathxy2 = makeSVG('path', { 'd': 'M38.171,54.182C35.256,55.388,32.171,56,29,56c-6.385,0-12.527-2.575-17.017-7.092C13.229,47.643,14,45.911,14,44   c0-3.859-3.14-7-7-7s-7,3.141-7,7s3.14,7,7,7c1.224,0,2.378-0.319,3.381-0.875C15.24,55.136,21.994,58,29,58   c3.435,0,6.778-0.663,9.936-1.971c0.51-0.211,0.753-0.796,0.542-1.307C39.247,54.213,38.681,53.971,38.171,54.182z M2,44   c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S2,46.757,2,44z', 'data-original': "#000000", 'class': "active-path", 'data-old_color': "#000000", 'fill': "#151313" }),


                $pathxy3 = makeSVG('path', { 'd': 'M4,31.213c0.024,0.002,0.048,0.003,0.071,0.003c0.521,0,0.959-0.402,0.997-0.93c0.712-10.089,7.586-18.52,17.22-21.314   C23.142,11.874,25.825,14,29,14c3.86,0,7-3.141,7-7s-3.14-7-7-7c-3.851,0-6.985,3.127-6.999,6.975   C11.42,9.922,3.851,19.12,3.073,30.146C3.034,30.696,3.449,31.175,4,31.213z M29,2c2.757,0,5,2.243,5,5s-2.243,5-5,5s-5-2.243-5-5   S24.243,2,29,2z', 'data-original': "#000000", 'class': "active-path", 'data-old_color': "#000000", 'fill': "#151313" });

            function makeSVG(tag, attrs) {
                var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
                for (var k in attrs)
                    el.setAttribute(k, attrs[k]);
                return $(el);
            }
            $imglinktag1 = $("<a>").attr({ 'href': link, 'style': 'text-decoration:none', 'target': '_blank' }),
                $imglinktag2 = $("<a>").attr({ 'href': link, 'style': 'text-decoration:none', 'target': '_blank' });

            // $("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));

            if (i < 3) {
                $("#politicsrowviewtop").append($divitem.append($divthumb.append([$divcardheader.append([$divp21.append($imgthumb), $divp22.append($pnewsname), $divmrauto.append($button)]), $imglinktag1.append($divimg.append($imggrp)), $divcaption.append([$imglinktag2.append($headcard), $imglinktag2.append($paracard), $divflex.append([$divtime.append($small), $divsvg.append($svgcapa_1.append([$g1.append($g1path.append($path1)), $g2.append($g2path.append($path2)), $g3.append($g3path.append($path3)), $g4.append($g4path.append($path4)), $g5.append($g5path.append($path5)), $g6.append($g6path.append($path6)), $g7.append($g7path.append($path7)), $g8.append($g8path.append($path8))])), $divsapce1.append($svgCapa2.append([$pathcapa20, $pathcapa21, $pathcapa22, $pathcapa23, $pathcapa24, $pathcapa25, $pathcapa26, $circle])), $divspace2.append($svgCapa3.append($gcapa1.append($gcapapath.append([$pathxy1, $pathxy2, $pathxy3]))))])])])));
            } else {
                $("#politicsrowview").append($divitem.append($divthumb.append([$divcardheader.append([$divp21.append($imgthumb), $divp22.append($pnewsname), $divmrauto.append($button)]), $imglinktag1.append($divimg.append($imggrp)), $divcaption.append([$imglinktag2.append($headcard), $imglinktag2.append($paracard), $divflex.append([$divtime.append($small), $divsvg.append($svgcapa_1.append([$g1.append($g1path.append($path1)), $g2.append($g2path.append($path2)), $g3.append($g3path.append($path3)), $g4.append($g4path.append($path4)), $g5.append($g5path.append($path5)), $g6.append($g6path.append($path6)), $g7.append($g7path.append($path7)), $g8.append($g8path.append($path8))])), $divsapce1.append($svgCapa2.append([$pathcapa20, $pathcapa21, $pathcapa22, $pathcapa23, $pathcapa24, $pathcapa25, $pathcapa26, $circle])), $divspace2.append($svgCapa3.append($gcapa1.append($gcapapath.append([$pathxy1, $pathxy2, $pathxy3]))))])])])));

            }
            shuffle();
        }

});
javascript html jquery performance load
1个回答
-2
投票

因为您正在使用jquery,所以可以使用getScript()函数:https://api.jquery.com/jQuery.getScript

更新:我运行了您的代码,当您遇到第一个条件时,它似乎失败了:if ($(ev1.target).is("#foryoupage")) {

您所有的条件都返回false,所以我将对此进行调查。

另请注意,使用eval()会带来巨大的安全风险,因此请考虑其他替代方法-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Never_use_eval

© www.soinside.com 2019 - 2024. All rights reserved.