Question

当我尝试使用ajax将html内容加载到div中时，未加载参考脚本，但css已加载。按照下面的测试用例进行操作。

PageA.html内容：

<html>
<head> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>     
</head> 
<body>
    <h1>Page A</h1>     
    <div>
        <div id="dck">
        </div>   
    </div>          
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "http://localhost/demo/pageB.html", data: {}, 
            type: "get", async: false, cache: false, dataType: "html",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            },
            success: function (data, textStatus, XMLHttpRequest) {
                $('div#dck').hide();
                $('div#dck').html(data);
                $('div#dck').delay(1000).show(0);
            }
        });
    });
</script>

PageB.html内容：

<html>
<head>      
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head> 
<body>
    <h1>Page B <span class="badge badge-secondary">Div Inside</span></h1>
</body>         

<script type="text/javascript">
    alert('1');

    new ClipboardJS('.btn-cp');

    alert('2');

    $(document).ready(function () {
        alert('3');
    });
</script>

如果一切正常，我们将看到三个警报，但不幸的是，我们仅看到第三个警报，因为对象ClipboardJS是在未加载的pageB javascript中定义的。

我尝试了一些选择，但是到现在为止没有任何效果，有人有什么建议吗？

我将在跨域部署中使用此功能，但这不是跨域问题，我在同一路径中遇到页面问题，我已经测试了将以上两个页面都放在一个称为Web服务器的文件夹中演示。

如何使用ajax在div中加载页面以确保已加载javascript？

0 个答案: