Как отправить веб-страницу из текстового поля в iframe

Итак, у меня есть iframe, который должен удерживать отображаемый код из текстового поля после нажатия кнопки, но я не уверен, как это сделать в javascript или jquery. Я знаю, как отправить конкретный сайт с URL-адресом для отображения внутри веб-страницы, но по какой-то причине, когда я пытаюсь отобразить текстовое поле и отправить его в iframe, он не работает.Как отправить веб-страницу из текстового поля в iframe

это мой IFrame:

<iframe id="outputIframe"></iframe>

это функция, которую я написал, чтобы отправить содержимое из редактора TEXTAREA (это прекрасно работает с но не с):

function openIframe() { 
     var e = document.getElementById('outputIframe'); 
     var editorHTML = editor.getValue(); 
     e.document.innerHTML = editorHTML; 
    }

Так редактор (codemirror) содержит код HTML, который пользователи пишут, а затем он должен выводиться в элементе iframe 'outputIframe', когда пользователи нажимают кнопку. Это похоже на разделы «Попробуйте» в w3schools.

источник

2015-02-19 user3625087

function openIframe() { 
      var editorHTML = editor.getValue(); 
      var iframe = document.getElementById('outputIframe'); 
      iframe.contentWindow.document.open(); 
      iframe.contentWindow.document.write(editorHTML); 
      iframe.contentWindow.document.close(); 
     }

http://jsfiddle.net/tintucraju/2Lsr9ju9/

источник

2015-02-19 03:47:49

Это сработало отлично, спасибо! – user3625087

С помощью JQuery вы можете ввести:

$("iframe").contents().find("body").html(yourHTML);

Важно сказать, это работает только если IFrame и ваш родительского окна находятся на одной и той же области, по соображениям безопасности.

источник

2015-02-19 03:53:16

Это сделает трюк - просто имейте в виду, что разные браузеры будут принимать разные максимальные длины данныхURL.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
function byId(e){return document.getElementById(e);} 
function allByClass(className){return document.getElementsByClassName(className);} 
function newEl(tag){return document.createElement(tag);} 
function newTxt(txt){return document.createTextNode(txt);} 

function toggleClass(elem, className){elem.classList.toggle(className);} 
function toggleClassById(targetElemId, className){byId(targetElemId).classList.toggle(className)} 

function hasClass(elem, className){return elem.classList.contains(className);} 
function addClass(elem, className){return elem.classList.add(className);} 
function removeClass(elem, className){return elem.classList.remove(className);} 

function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); } 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    byId('displayBtn').addEventListener('click', onDisplayBtn, false); 
} 

function onDisplayBtn() 
{ 
    var rawInput = byId('htmlInput').value; 
    var base64Output = "data:text/html;base64," + btoa(rawInput); 
    byId('htmlOutput').src = base64Output; 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
    <textarea id="htmlInput" style="width: 462px; height: 185px;"></textarea> 
    <hr> 
    <button id='displayBtn'>Display</button> 
    <br> 
    <iframe id='htmlOutput' style="width: 462px;"></iframe> 
</body> 
</html>

источник

2015-02-19 04:27:56 enhzflep

Как отправить веб-страницу из текстового поля в iframe

ответ

Смежные вопросы