在iframe中调用函数

Question

我创建了一个脚本，单击按钮时单击replaceWith（）按钮。除此之外，我用id offer-block更改了另一个div和frame的内容。我想在加载一个帧后调用call_locker（）。为此我编写了这样一个脚本：

$("#verify-btn").on("click", function() {
	$("#locker-content").replaceWith('<div id="locker-offer"><div id="olock-title"><p>Surveys</p><p>Human Verification</p></div><iframe id="offer-block"></iframe></div>');
	$("offer-block").load(function() {
	 call_locker();
	});
});



$(".fa-lock").on("click", function() {
	$("#overlay").css("display","none");
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
margin: 0;
font-family: 'open sans',sans-serif;
font-size: 15px;
}

#overlay {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.8);
z-index: 200;
}

#gateway {
width: 788px;
background: #fff;
border-radius: 5px;
position: fixed;
left: 50%;
margin-left: -394px;
top: 50%;
transform: translateY(-50%);
height: 386px;
}

#locker-title {
padding: 15px;
border-bottom: 1px solid #eaeaea;
}

.fa-lock {
float: right;
color: #c0c0c0;
font-size: 18px;
margin-top: 2px;
}

.fa-lock:hover {
color: #00a8ff;
cursor: pointer;
transition-duration: 0.5s;
}

#locker-content {
padding: 20px;
border: 2px solid #f2f2f2;
width: 50%;
border-radius: 5px;
margin: 100px auto;
}

#verify-btn {
font-family: 'open sans',sans-serif;
font-size: 15px;
width: 200px;
border: 0;
background: #00a8ff;
border-radius: 3px;
padding: 10px;
color: #fff;
}

#verify-btn:hover {
cursor: pointer;
background: #077bb7;
transition-duration: 0.5s;
}

#locker-captcha {
float: right;
padding: 5px 0;
text-align: center;
}

#locker-captcha p {
margin: 0;
font-size: 10px;
}

#locker-captcha i {
color: #00a8ff;
font-size: 20px;
}



#locker-footer {
padding: 15px 10px;
border-top: 1px solid #eaeaea;
font-size: 14px;
text-align: center;
color: #c0c0c0;
}

#locker-offer {

}

#olock-title {
padding: 10px;
text-align: center;
}

#olock-title p {
margin: 0;
font-size: 14px;
color: #c0c0c0;
}

#olock-title p:first-child {
font-size: 18px;
color: #000;
}

<script src="https://use.fontawesome.com/bd87eb43df.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.hostedfiles.net/contentlockers/load.php?id=df6f1a66c77741994c029a4cd60742ce"></script>

<div id="overlay">
<div id="gateway">

	<div id="locker-title">Human Verification Required <i class="fa fa-lock" aria-hidden="true"></i></div>
	
	<div id="locker-content">
	<button id="verify-btn">Verify Trough Survey </button>
	<div id="locker-captcha">
	<i class="fa fa-spinner fa-spin"></i>
	<p>veriCAPTCHA</p>
	</div>
	</div>
	
	<div id="locker-footer">Download will start <b style="color: #00a8ff">automatically</b> upon survey completion. Surveys for your country typically take 2-3 minutes.</div>

</div>
</div>

不幸的是它不起作用 - 出了什么问题？