尝试动态加载 JavaScript 库。 我收到错误 - Alertify 未定义。我有带有库的 HTML 代码(alertify)。我无法将其插入 iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"><\/script>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>' +
'<p>Text 2</p>' +
'<script>alertify.success("Success message");<\/script>';
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
使用 jQuery 的示例。 我收到错误:
$ is not defined.
我有带有库的 HTML 代码 (jQuery)。我无法将其插入 iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
'<p>Text 2</p>' +
'<script>$("p").remove();<\/script>';
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
最佳答案
这应该可行，尝试动态加载 jquery，然后当调用 onload 时它可以触发您的自定义代码。看我的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
'<p>Text 2</p>' +
'<script>' +
'var el = document.createElement("script"); ' +
'el.src = "https://code.jquery.com/jquery-3.4.1.js"; ' +
'el.onload = function(){ ' +
' $("p").remove(); ' +
'}; ' +
'document.getElementsByTagName("body")[0].append(el);' +
'<\/script>'
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
这是脚本本身(未编码，更容易理解):
<script>
var el = document.createElement("script");
el.src = "https://code.jquery.com/jquery-3.4.1.js";
el.onload = function(){
// Put your code here that needs jquery.
$("p").remove();
};
document.getElementsByTagName("body")[0].append(el);
</script>
关于javascript - 动态加载 JavaScript 库并调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59921708/