Question

我目前正在使用“分屏式” Web应用程序。它使用硒来检索网页的html，然后使用srcdoc发送并在iframe中显示它。我想要，当有人在第一个屏幕上按下链接时，让第二个屏幕显示一个简单的“正在加载”，同时将ajax请求发送到后端以检索网址的html（因为可能要花几秒钟的时间才能完成）加载），然后在第二个屏幕中显示检索到的html。

为此，我将JQuery事件代码“插入”到后端主体标签之前的后端（如下所示）的第一个屏幕的src代码中（由于检索到的源是字符串，所以很容易做到））。第二个屏幕具有id =“ oframe”。

由于某种原因，JQuery事件不会触发。有什么想法吗？

<script>
    $("a").on("click",function(e){ 
    e.preventDefault(); 
    if(e.target.href){ 
        let link = e.target.href;
        parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
                                                       <p>Loading</p></body></html>";
        $.ajax({ 
            url: "/newOrigin",
            data: {"link":link}, 
            type: "POST", 
            success: function(response) { 
                 parent.document.getElementById("oframe").srcdoc=response.site;}, 
            error: function(error) {console.log(error);} 
        });
    }});
    </script>

请注意，如果我只有

，则该事件有效

parent.document.getElementById("oframe").srcdoc="<html><head></head><body>

或

$.ajax({ 
            url: "/newOrigin",
            data: {"link":link}, 
            type: "POST", 
            success: function(response) { 
                 parent.document.getElementById("oframe").srcdoc=response.site;}, 
            error: function(error) {console.log(error);} 
        });

在if语句中。它们一起停止了事件，我知道这是因为preventDefault（）无法正常工作（链接在新选项卡中打开）。

示例<a>标签：

<a class="gdpr-modal-link" target="_blank" ref="http://www.politifact.com/privacy/">cookies</a>

Answer 1

JavaScript字符串的中间不能有换行符。

所以，放这个：

parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
                                               <p>Loading</p></body></html>";

全部一行：

parent.document.getElementById("oframe").srcdoc="<html><head></head><body>p>Loading</p></body></html>";

jQuery .on（“ click”）事件未触发

1 个答案: