2013-04-30 9 views
0

У меня есть текстовое поле HTML и IFrame. Нажав кнопку, я хотел бы иметь возможность загружать содержимое текстового поля в IFrame.JQuery Загрузка содержимого textarea в IFrame

Например, когда пользователь вводит Hello World в текстовое поле и нажимает кнопку отправки, текст Hello World будет отображаться в IFrame.

Любые идеи о том, как это можно сделать? Заранее спасибо.

ПРИМЕЧАНИЕ: Я хотел бы использовать JQuery, но я думаю, что для этого мне придется использовать PHP. Это звучит больше на стороне сервера.

+0

Я считаю, что единственное предостережение в этом состоит в том, что сначала вам нужно иметь пустую страницу iframe, например 'empty.html', которая будет состоять из тега '' ... Возможно, я ошибаюсь. Пока iframe находится на том же сервере, вы можете получить доступ к содержимому и ввести любой html, который вы хотите. – Ohgodwhy

ответ

0

Вы можете настроить таргетинг на IFRAME с JQuery только:

<html> 
<head> 
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('#btnSubmit').click(function() { 
     var content = $("#test").val(); 
     $('#iframe1').contents().find('p').html(content); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <textarea name="test" id="test" rows="5" cols="40"></textarea> 
    <button id="btnSubmit">Post to iFrame</button> 
    <iframe name="iframe1" id="iframe1" src="test2.html"></iframe> 
</body> 
</html> 

вашей странице содержимого IFrame, в этом case "test2.html" будет иметь примерно следующее:

<html> 
<body> 
    <p>[intro text or whatever]</p> 
</body> 
</html> 

Вот предыдущая запись S/O с аналогичной проблемой: Selecting an element in iFrame jQuery

+0

Это тоже не работает. – user2228462

+0

Вы правы, похоже, не нравится тег тела в поиске. Но если я изменил это на '.find ('p')', он работает так, как показано здесь: http://www.reventsoftware.com/test1.html, вы можете, вероятно, использовать div вместо p, если хотите. – Revent

0
var content = $("#myTextarea").val(); 
$('#myIframe').contents().find('html').html(content); 

(редактировать) ... и #myIframe первоначально должны быть:

<html></html> 
+0

В настоящее время это не работает. Я сделал функцию, называемую инъекцией, и поместил в нее свой код. Затем я сделал форму и отправлю кнопку, назвавшую эту функцию. – user2228462

+0

Я тестировал его здесь, кажется, работает: http://jsfiddle.net/LVrBt/1/ –

+0

Ох - убедитесь, что iframe указывает на документ в том же домене, что и ваш внешний html, или вы выиграете ' t разрешить редактировать iframe. –