个人中心
gpt4 book ai didi

javascript - <script src=...> 输出到指定的div

转载 作者：行者123 更新时间：2023-12-01 00:44:25 25 4
gpt4 key购买 nike

我有一些外部代码(我无法修改)来使用 https://rss.bloople.net/ 提取 RSS 提要。

此站点提供的 JS 代码如下例所示:

<script src="//rss.bloople.net/?url=https%3A%2F%2Fwww.feedforall.com%2Fsample.xml&detail=-1&showtitle=false&type=js"></script>

我试图将其放入一个长 Accordion 列表中，并在每个 Accordion 展开时显示相关的 RSS 提要。

如果我硬编码这个加载时间会很长，所以我想动态调用脚本。然而，当我实现这一点时，代码的输出被放置在页面的末尾而不是 Accordion 面板内。

我不想使用 iframe 解决方案，因为提要的高度是可变的，但我当然会考虑所有选项。

我尝试使用onclick，通过script = document.createElement("script");加载脚本

然后使用append.child将其附加到div

这似乎有效，但我猜它正在做的是在此处加载脚本然后执行它。但执行它会将输出文本添加到文档的末尾。

我猜我需要什么，所以将输出存储为变量，并用变量而不是脚本附加 div...？

下面的示例代码 - Accordion 无法完全工作，但我可以稍后修复此问题...

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<style>
type="text/css">a {text-decoration: none}
.accordion {
    background-color: #470a68;
    color: #ffffff;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: solid;
border-color: white;
border-width:1px;
    text-align: left;
    outline: none;
    font-size: 17px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #0092bc; 
}

.accordion2 {
    background-color: #EEEEEE;
    color: #280071;
    cursor: pointer;
    padding: 5px;
    padding-left: 10px;
    width: 100%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
border-color: grey;
border-width:1px;
    text-align: left;
    outline: none;
    font-size: 17px;
    transition: 0.4s;
}
.active2, .accordion2:hover {
    background-color: #d1d1d1;
    border-bottom-style: solid #ddd;
}

.accordion3 {
    background-color: #ffffff;
    color: #280071;
    cursor: pointer;
    padding: 5px;
    padding-left: 10px;
    width: 100%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
border-color: grey;
border-width:1px;
    text-align: left;
    outline: none;
    font-size: 17px;
    transition: 0.4s;
}
.active3, .accordion3:hover {
    background-color: #e0e0e0;
    border-bottom-style: solid #ddd;
}


.panel {
    padding-left: 10px;
    display: none;
    background-color: white;
    border-color: white;
    border-bottom-style: solid;
    border-color: grey;
border-width:1px;
}
 .row { vertical-align: top; height:auto !important;}
 .list {display:none; }
 .show {display: none; }
 .hide:target + .show {display: inline; }
 .hide:target {display: none; }
 .hide:target ~ .list {display:inline; }
 @media print { .hide, .show { display: none; } }
table {
    border-collapse: collapse;
    width: 100%;
    background-color: #e0e0e0;

}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

tr:hover {background-color:#e0e0e0;}


}

.container {
position: relative;
width: 50%;
height: 200;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 200%;
}

.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}



</style>
</head>
<body>

<button class="accordion">Topic 1</button><div class="panel">                     <button id="LoadRSS1" class="accordion2"><b>Load Topic 1 RSS</b></button>
<button class="accordion3"><b>RSS to load under here</b><br>

<script type="text/javascript">

LoadRSS1.onclick = function(){

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//rss.bloople.net/?url=https%3A%2F%2Fwww.feedforall.com%2Fsample.xml&detail=-1&limit=5&showtitle=false&type=js"; 
   document.getElementById("RSSHere").appendChild(script);
    return false;
}
</script>

<div id="RSSHere"></div>

</button>            
            </div>  

<button class="accordion">Topic 2</button><div class="panel">                     <button id="LoadRSS2" class="accordion2"><b>Load Topic 2 RSS</b></button>
<button class="accordion3"><b>RSS to load under here</b><br>
   <script type="text/javascript">

LoadRSS2.onclick = function(){

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//rss.bloople.net/?url=https%3A%2F%2Fwww.feedforall.com%2Fsample.xml&detail=-1&limit=5&showtitle=false&type=js"; 
   document.getElementById("RSSHere2").appendChild(script);
    return false;
}
</script>

<div id="RSSHere2"></div>

</div>



<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
var acc2 = document.getElementsByClassName("accordion2");
var ii;

for (ii = 0; ii < acc2.length; ii++) {
    acc2[ii].addEventListener("click", function() {
        this.classList.toggle("active2");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
function scrollFunction() {
  var elmnt = document.getElementById("PGframe");
  elmnt.scrollIntoView();
}
</script>
<script type="text/javascript">
function stopEventPropogation(e){
e.stopPropogation()
}
</script>

<script>
$(document).ready(function() {
//////////////////////////
$( '#accordion' ).accordion({
animate: 1000,
beforeActivate: function( event, ui ) {
$('#d1').html("newHeader : " + ui.newHeader.text() + " <br> newPanel : " + ui.newPanel.text() )
$('#d1').append(" <br><br> oldHeader : " + ui.oldHeader.text() + "<br> oldPanel : " + ui.oldPanel.text());
 }
});
/////////////////
})

</script>

一个奇怪的观察结果是，如果我继续单击 Accordion 按钮来加载脚本，它最终会开始加载到正确的位置。我不知道为什么会这样。

最佳答案

该脚本使用以下代码插入其 DOM 节点。

var script = document.scripts[document.scripts.length - 1];
var parent = script.parentNode;
while(nodes.length > 0) parent.insertBefore(nodes.shift(), script);
parent.removeChild(script);

第一行设置script到最后<script>页面上的标签，这将是在页面加载期间加载此脚本的标签。然后它在脚本之前插入 DOM 节点，最后删除脚本。

这基本上是传统用法 document.write() 的现代版本在脚本所在的位置插入 HTML 代码。

如果稍后在文档中间插入脚本标记，它不一定是页面中的最后一个脚本，因此它不会在所需位置插入 HTML。

对此你真的无能为力，它只是没有设计成按照你想要的方式使用。如果您与该网站有业务关系，您可以建议他们提供更好的自定义方法，例如允许您指定应插入新元素的 DOM 元素 ID 的 URL 参数。

关于javascript - &lt;script src=...> 输出到指定的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57508250/

25 4 0
文章推荐： javascript - 当先前的数组被删除时，数组是未定义的
文章推荐： mysql - 我如何调用存储过程(使用 zf2，学说 2)？
文章推荐： php - 在分数上使用 php 的 explode 函数
文章推荐： f# - 什么时候创建 fsc 一个 init@ 变量？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com