javascript - 如何导入远程模态的 javascript

Question

我试图在我的网页中创建一个远程模式（bootstrap4），我使用下面的 URL，它只适用于远程文件的模式内容，而它的 javascript 不起作用。

带有远程模态的 Bootstrap 4

有人能告诉我如何让模态 HTML 的 javascript 进入远程显示模态的目标页面吗？

目标HTML代码： https ://codepen.io/gorilla0823/pen/qLXQaM

远程模式： https ://codepen.io/gorilla0823/pen/VqzVpR

我不知道为什么它与我原来的工作方式不同。（我原来的那个是全功能的modal，我想让modal远程到目标页面。）

模态（使用我的翻译功能，这是我希望通过链接在目标页面中显示的内容）： http ://sehomework.000webhostapp.com/translation/index(origin).html

modal 的功能：第一个选项是翻译前，第二个选项是翻译后，你可以选择语言然后翻译或识别你输入的字母，这是我要显示的完整模态。但是，它现在可以与内容正文一起使用，如果代码不能完全工作，它会显示错误消息（语音 SDK 未找到）。

我想让模态通过链接远程访问页面，其正文的内容有效，而脚本不起作用，我已经评论了哪些有效，哪些无效的代码，链接是https： //codepen.io/gorilla0823/pen/VqzVpR（同远程模态）

<!-- target.html -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
I put my modal-content here.But the script doesn't work
</div>
</div>
</div>

<script type="text/javascript">
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-content').load(button.data("remote"));
});
</script>

<!-- remote modal -->
<div class="modal-header">
<script>    
//It doesn't work   
</script>
</div>
<!-- Modal body -->
<div class="modal-body">            
<div id="warning">
</div>
<script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
script>
//It doesn't work
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>

标签： javascriptjqueryhtmlbootstrap-4bootstrap-modal