HTML输入并使用用户输入创建iFrame URL?

时间:2013-02-16 21:48:51

标签: html

如何获取以下提示并使用用户在提示中键入的内容并将其转换为如下所示的iFrame网址:

<iframe src="http://www.weather.com" sandbox="" seamless="" width="100%" height="200 </iframe>


<html>
<head>
<script>
function disp_prompt()
 {
var sitename=prompt("Please enter your Website:","www.anywebsite.com")
document.getElementById("msg").innerHTML="Your Site: " + sitename
}
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="Click to enter in Website URL">
<br><br>

<div id="msg"></div>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

<html>
<head>
<body>

<iframe id="iframeID" src="http://www.weather.com" sandbox="" seamless="" width="100%" height="200"></iframe>
    <form name="FormInput" action="" method="get" id="input" onsubmit="document.getElementById('iframeID').src=document.FormInput.site.value;">
 Website URL: 
<input type="text" name="site"/>
<br/>
<br/>
<input type="submit" value="Submit"/>
<br/>
</form>


<div id="msg"></div>

</body>
</html>

答案 1 :(得分:0)

在Youtube上工作,Vimeo

希望有所帮助:

click here to run the script

function createIFrame(url, width, height){

switch(url.substring(7,12)){
    case "www.y":
        return url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="'+width+'" height="'+height+'" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');       
        break;
    case "youtu":
         return url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="'+width+'" height="'+height+'" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');       
        break;
    case "vimeo":
        return url.replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(?:\/\?)?(.+)/g, '<iframe width="'+width+'" height="'+height+'" src="http://player.vimeo.com/video/$1" frameborder="0" allowfullscreen></iframe>');
        break;
}

}