我有一些外部代码（我无法修改）来使用https://rss.bloople.net/提取RSS feed。
此示例中提供了此站点的JS代码：
<script src="//rss.bloople.net/?url=https%3A%2F%2Fwww.feedforall.com%2Fsample.xml&detail=-1&showtitle=false&type=js"></script>
我试图将其放入一个较长的手风琴列表中，并在扩展每个手风琴时显示相关的RSS feed。
如果我在加载时间进行硬编码很长，那么我想动态调用脚本。但是，当我做到这一点时，代码的输出将放置在页面的末尾，而不是放在手风琴面板的内部。
由于Feed的高度是可变的，因此我不希望使用iframe解决方案，但是我会考虑所有选项。
我尝试使用onclick，通过script = document.createElement("script");
然后使用append.child将其附加到div
这似乎起作用，但是我想它正在做什么是在这里加载脚本然后执行它。但是执行它会将输出文本添加到文档末尾。
我想我需要什么，所以将输出存储为变量，并在div后面附加变量而不是脚本...？
下面的示例代码-手风琴无法完全正常工作，但我稍后可以解决此问题...
<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>
一个奇怪的发现是，如果我一直单击手风琴按钮来加载脚本，它将最终开始在正确的位置加载。我不知道为什么会这样。
答案 0 :(得分：2)
该脚本使用以下代码插入其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代码。
如果稍后将script标记插入文档的中间，则不一定是页面中的最后一个脚本，因此不会将HTML插入所需的位置。
实际上，您对此无能为力，只是没有按照您想要的方式使用。如果您与该站点有业务关系，则建议他们提供更好的自定义站点方法，例如URL参数，该参数允许您指定应在其中插入新元素的DOM元素的ID。