确保对象元素已完全加载页面

Question

我有一个对象元素，我用它来加载外部页面点击按钮 我的Html是：

<input type="text" id="txt" />
<button onclick="getdata();return false;">Load page</button>
<div>
    <object type="text/html" id="ExternalPageLoader" data="#">
    </object>
</div>

和脚本

<script>
function getdata() {
    var url = $("#txt").val();
    $("#ExternalPageLoader").attr("data", url);
}
</script>

如何确保所请求的页面已完全加载到对象元素中 我想检查外部页面而不是当前页面

Answer 1

与onload一起使用。

function getdata() {
        var url = $("#txt").val();
        $("#ExternalPageLoader").attr("data", url);
         console.log('loading...')
    }
    
    function loading(){
    console.log('loaded sucess')
    
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
  <button onclick="getdata();return false;">Load page</button>
  <div>
    <object type="text/html" id="ExternalPageLoader" data="" onload="loading()">
    </object>
   </div>

Answer 2

尝试使用.ready()事件：

$("#ExternalPageLoader").ready(function() {
    // Handler for .ready() called.
});