[英]How to replace Current script tag with HTML contents generated by the same script
我想用同一腳本生成的 HTML 內容替換當前腳本標簽。 也就是說，我的頁面是
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
在 each.js 文件中生成對應的 html 內容。 我想把內容作為父 div 的 innerHTML。 但無法為父 div 設置 id，因為頁面不是 static。 所以必須將當前腳本標簽替換為 HTML 內容。 我怎樣才能做到這一點？
對於每個腳本標簽 src 是相同的。 所以無法識別src。 這些腳本隨機顯示一些帶有文本的圖像。 腳本相同，但加載時在 div 中顯示不同的內容
請幫我
在 myfile1.js 中嘗試：
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
對於那些試圖實現 JSONP 小部件的人來說，這是一個很好的問題。 目標是為用戶提供盡可能少的代碼。
用戶喜歡：
<script type="text/javscript" src="widget.js"></script>
超過：
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
這是如何實現第一個片段的示例：
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
查看： http://alexmarandon.com/articles/web_widget_jquery/以了解在腳本中包含庫的正確方法。
document.currentScript自 2011 年起在 Firefox 和 2013 年在 Chrome 上可用。
MDN 上的 document.currentScript 文檔
<.DOCTYPE html> <meta charset="UTF-8"> <title>currentScript test</title> <h1>Test Begin</h1> <script> document.currentScript;outerHTML = "blah blah"; </script> <h1>Test End</h1>
噗——舊答案不見了。
根據您上次的編輯，這是您想要執行的操作：
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
不幸的是，正在運行的 JavaScript 文件不知道它在哪里運行。 如果您在腳本中使用 document.write()，則寫入 function 將在腳本運行的任何地方發生，這將是完成您想要的一種方法，但無需替換內容或能夠對封閉的 DIV 執行任何操作.
我真的無法想象您在構建頁面時會有如此嚴格的限制 - 當然，如果頁面是動態的，您可以為您的 DIV 元素生成標識符，或者以更傳統的方式加載內容？
為什么不使用 Smarty？
您可以在 Smarty 模板中使用 javascript，或者只使用內置函數。
如果你不介意腳本標簽保留在原地，你可以使用像 document.write() 這樣簡單的東西。
myfile1.js：
document.write("<p>some html generated inline by script</p>");
它將完全滿足您的需求。
如何使用 JavaScript 在 HTML 中用另一個腳本標簽替換腳本標簽？
[英]How to replace a script tag with another in HTML with JavaScript?
試圖替換一個內容<script> tag using Javascript
[英]Trying to replace the contents of a <script> tag using Javascript
通過 npm run build 用 HTML 中的內容替換腳本和 css 引用
[英]Replace script and css references with contents in HTML via npm run build
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.