全功能的iFrame W /前进/后退按钮，URL装载机等 [英] Full Featured iFrame w/ Forward/Back Buttons, URL Loader, etc
本文介绍了全功能的iFrame W /前进/后退按钮，URL装载机等的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谢谢观看我的问题。所以，我有iframe的问题。我想的iframe几乎是像一个实际的浏览器。我需要使它具有ATLEAST前进按钮，后退按钮和一个网址加载器。我已经做到了这一点，但都不尽如人意。
我的code：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;的iFrame＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）
{
$（'。frmSubmit'）。点击（函数（五）
{
$（'＃myIframe'）ATTR（'src'中，$（'frmUrlVal。'）ATTR（'值'））;
亦即preventDefault（）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式为GT;
＆LT;输入类型=文本值=HTTP：//级=frmUrlVal＆GT;
＆LT;输入类型=提交级=frmSubmitVALUE =转到＆GT;
＆LT;输入类型=按钮VALUE =＆放大器; LT;＆放大器; LT;＆安培; nbsp;返回＆安培; NBSP;的onClick =myIframe.history.back（）＆GT;
＆LT;输入类型=按钮VALUE =前向和; NBSP;＆放大器; GT;＆放大器; GT;的onClick =myIframe.history.forward（）＆GT;
＆LT; /表及GT;
＆LT; IFRAME ALIGN =中心宽度=50％HEIGHT =50％SRC =http://gravitate.webs.comFRAMEBORDER = YES SCROLLING =是NAME =myIframeID =myIframe ＆GT; ＆LT; / IFRAME＆GT;
＆LT;形式为GT;
一个重载/取消按钮也将是preffered。甚至一个状态。谢谢！
解决方案
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;的iFrame＆LT; /标题＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的＆GT;
功能LoadPage（）{
变种objFrame =的document.getElementById（myIframe）;
objFrame.src =的document.getElementById（URL）的价值。
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV的风格=明确：既;＆GT;
＆LT;输入类型=文本VALUE =http://amazon.co.uk级=frmUrlValID =URL＆GT;
＆LT;输入类型=提交级=frmSubmitVALUE =加油的onclick =LoadPage（）＆GT;
＆LT;输入类型=按钮VALUE =＆放大器; LT;＆放大器; LT;＆安培; nbsp;返回＆安培; NBSP;的onClick =myIframe.history.back（）＆GT;
＆LT;输入类型=按钮VALUE =前向和; NBSP;＆放大器; GT;＆放大器; GT;的onClick =myIframe.history.forward（）＆GT;
＆LT; / DIV＆GT;
＆LT; IFRAME ALIGN =中心WIDTH =100％HEIGHT =90％SRC =http://amazon.co.ukFRAMEBORDER = YES SCROLLING =是NAME =myIframeID =myIframe ＆GT; ＆LT; / IFRAME＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
Thanks for viewing my question. So, I have a question with iframes. I want an iframe that is almost like an actual browser. I need to make it have atleast a forward button, a back button, and a URL loader. I have accomplished this but it is not working well. My Code:
<html>
<head>
<title> iFrame </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#myIframe').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" value="http://"class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
</form>
<iframe align="center" width="50%" height="50%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
<form>
A reload/cancel button would also be preffered. Maybe even a statusbar. Thanks!!
解决方案
<html>
<head>
<title> iFrame </title>
<script language="javascript">
function LoadPage(){
var objFrame=document.getElementById("myIframe");
objFrame.src=document.getElementById("URL").value;
}
</script>
</head>
<body>
<div style="Clear:both;">
<input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
</div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</body>
</html>
这篇关于全功能的iFrame W /前进/后退按钮，URL装载机等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
