Измените iframe src на результат ввода формы

Я хочу иметь это, когда пользователь может разместить любой веб-сайт, который они хотят в форме ввода, и нажать «Отправить» и загрузить этот сайт в iframe.Измените iframe src на результат ввода формы

Мой код:

<body> 
<form method="post" target="browser"> 
<input style="width:82%;" placeholder="Put the website here" name="url" type="text" /> 
<input style="width:8%;" name="submit" type="button" value="Go" /> 
</form> 
<iframe name="browser" src="http://google.com" style="height:100%; width:100%"></iframe> 
</body>

Любопытное как мини-браузер, есть больше на веб-сайт, и это не будет использоваться для практических целей, кроме шутки, так что я не волнуюсь о плохих практиках.

Предпочтительно не javascript, но это нормально, если это так.

Спасибо!

источник

2013-07-29 Jacob Wood

Я ответил, когда были предыдущие ответы becuse: ответ Pietu1998 не будет работать без починки, Картикеян нам не является полный, и faino слишком сложна для такого простого поведения, тем более, что кажется, что вы не хотите слишком много входить в javascript. –

Я хотел бы сказать, что происходит с Javascript-единственным решением является самым простым здесь. Я слегка изменил ваш HTML, чтобы вызвать функцию javascript при нажатии кнопки.

<form method="post" target="browser"> 
<input id="txtUrl" style="width:82%;" placeholder="Put the website here" name="url" type="text" /> 
<input style="width:8%;" type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/> 
</form> 
<iframe id="browser" name="browser" src="http://google.com" style="height:100%; width:100%"></iframe>

Эта простая функция затем изменяет источник вашего фрейма:

<head> 
<script type="text/javascript"> 
    function setBrowserFrameSource(){ 
     var browserFrame = document.getElementById("browser"); 
     browserFrame.src= document.getElementById("txtUrl").value; 
    } 
</script> 
</head>

источник

2013-07-29 04:53:34

Да, но это не работает, если вы нажмете enter. –

Вы можете легко добавить, что функциональность –

Да, только одна проблема. Это не работает с сайтами за пределами моего домена?Когда я пытаюсь использовать его, iframe пуст. Я прямо щелкаю по нему и просматриваю источник кадра, и он говорит: «view-source: data :,» Любая идея, что может быть? –

Надеюсь, вы хотите это сделать, полностью на стороне клиента.

Без Javascript вы не можете достичь этого, поскольку он динамичен по своей природе.

Во-первых, создать идентификатор для фрейма, и добавить сценарий, как это, в обработчик щелчка,

document.getElementById('iframeid').src = 'pageurl';

источник

2013-07-29 04:35:20 Karthikeyan

'getElementById ('iframeid')' not 'getElementById ['iframeid']' – Pietu1998

@ Pietu1998 Отредактировано, спасибо. – Karthikeyan

Это не должно быть возможным без JavaScript, но вот способ сделать это с :

<input style="width:82%;" placeholder="Put the website here" name="url" id="url" type="text" /> 
<input style="width:8%;" name="submit" type="button" value="Go" onclick="document.getElementById('browser').src = document.getElementById('url').value;" /> 
<iframe name="browser" id="browser" src="http://google.com" style="height:100%; width:100%"></iframe>

Вам даже не нужна форма, так как мы ничего не отправляем на сервер. Также обратите внимание, что я добавил значение ID для элементов. Кроме того, вы можете изменить <input type="button"> к <button> тегу:

<button style="width:8%;" name="submit" onclick="document.getElementById('browser').location = document.getElementById('url').value;">Go</button>

источник

2013-07-29 04:39:33 Pietu1998

всегда лучше держать скрипт от тегов пользовательского интерфейса. Может быть, вы просто добавлены в образовательных целях. – Karthikeyan

@ Karthikeyan OP сказал, что «это не будет использоваться для практических целей, кроме шутки, поэтому я не буду беспокоиться о плохих практиках». поэтому я подумал, что проще не начинать создавать '

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