Я пытаюсь вставить скрипт и HTML в iframe. Моя проблема заключается в том, что я могу добавить HTML в iframe, но я не могу добавить его, а также сохранить источник iframe.
Конечной целью является загрузка HTML в источник iframe и наличие наложения. Пожалуйста, порекомендуйте. Я думаю, что я немного на этом.
$(function() {
var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="https://www.google.com" width="100%" height="100%" style="width:100%; height:100%;position:relative;">');
$('body').html( $frame );
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
$body.html('<div id="cursor" style="position:absolute;style:z-index:999999;"><img width="80" src="/assets/img/cursor_blue.png" /></div>');
$body.html('<p id="test" style="z-index:9999999;">The queue length is: <span></span></p>');
}, 1 );
});
Вот что вы можете сделать. Создайте iframe с пустым атрибутом src. Дайте ему некоторый идентификатор. Сделайте ajax-вызов требуемого URL-адреса, чтобы извлечь весь html и добавить его в тело iframe. Теперь добавьте дополнительный HTML-код, который вы хотите добавить в том же iframe. Я протестировал метод в jsfiddle, проверьте http://jsfiddle.net/9vhL2/
$(function() {
var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="" width="100%" height="100%" style="width:100%; height:100%;position:relative;">');
$('body').html( $frame );
var $body = $("#viewframe").contents().find('body');
$.ajax(
{
url:"/echo/html/",
method:'POST',
success:function(data){
$body.append(data);
$body.append("<h1>Text added by script</h1>")
},
data: {html: "<p>Text echoed back to request</p><h2>Text from page</h2>"}
});
});