JavaScript如何修改页面中iframe的属性值
例如有这样一个iframe：<iframesrc="xx.hmtl"name="x"width="100px"height="100"></iframe>如何利用java...
例如有这样一个iframe：
<iframe src="xx.hmtl" name="x" width="100px" height="100"></iframe>
如何利用javascript获取这个iframe的width和height的值并修改这个值呢，谢谢高手指教。 展开
<iframe src="xx.hmtl" name="x" width="100px" height="100"></iframe>
如何利用javascript获取这个iframe的width和height的值并修改这个值呢，谢谢高手指教。 展开
展开全部
页面一刷新，所有JS对页面做的修改都会恢复的，如果楼主想让浏览器记住JS设定的width之类的数据（即使刷新页面，也依然能够记住刷新前的JS设置），目前来讲：
1、HTML5有客户端数据储存的方法，但是支持的浏览器不多，jQuery库的Data对象实现了部分的HTML5客户端储存的功能，而且多浏览器支持；
2、简单点的办法就是使用URL参数，即在使用JS对页面进行修改（比如重新设定页面中某个iframe的width）时，同时把设定的值添加到页面的URL中，这样当页面刷新时，设置的值并没有丢失，只要通过适当的方法，把这些值再读出来，并重新设置，就可以模拟保持设置。举个简单例子：
<html>
<head>
<script>
//储存当前页面的JS对iframe做出的设置
var settings = {};
function autoSet(){
//处理URL，如果带有初始设置，则读取
var sval = location.href;
if(sval.indexOf('?')){
var vals = sval.split('?')[1];
if(vals.indexOf('&')){
vals = vals.split('&');
for(var i=0;i<vals.length;i++){
settings[vals[i].split('=')[0]] = vals[i].split('=')[1];
autoSetVal(vals[i].split('=')[0],vals[i].split('=')[1]);
}
}else{
settings[vals.split('=')[0]] = vals.split('=')[1];
autoSetVal(vals.split('=')[0],vals.split('=')[1]);
}
}
}
function autoSetVal(tag,val){
var ifm = document.getElementById('ifm1');
ifm[tag] = val;
}
function setVal(tag,val){
settings[tag] = val;
fixURL();
}
function getSURL(){
var sval = location.href;
if(sval.indexOf('?')){
return sval.split('?')[0];
}else{
return sval;
}
}
function fixURL(){
var url = getSURL();
if(settings != {}){
url += '?';
var vals = [];
for(var i in settings){
vals.push(i+'='+settings[i]);
}
url += vals.join('&');
}
location.href = url;
}
window.onload = function(){
autoSet();
}
</script>
</head>
<body>
<iframe id="ifm1" src="http://www.baidu.com" name="x" width="750px" height="500px"></iframe><br />
<input type="text" value="750" id="sw"><input type="button" value="设置宽度" onclick="setVal('width',document.getElementById('sw').value)"><br />
<input type="text" value="500" id="sh"><input type="button" value="设置高度" onclick="setVal('height',document.getElementById('sh').value)"><br />
</body>
</html>
1、HTML5有客户端数据储存的方法，但是支持的浏览器不多，jQuery库的Data对象实现了部分的HTML5客户端储存的功能，而且多浏览器支持；
2、简单点的办法就是使用URL参数，即在使用JS对页面进行修改（比如重新设定页面中某个iframe的width）时，同时把设定的值添加到页面的URL中，这样当页面刷新时，设置的值并没有丢失，只要通过适当的方法，把这些值再读出来，并重新设置，就可以模拟保持设置。举个简单例子：
<html>
<head>
<script>
//储存当前页面的JS对iframe做出的设置
var settings = {};
function autoSet(){
//处理URL，如果带有初始设置，则读取
var sval = location.href;
if(sval.indexOf('?')){
var vals = sval.split('?')[1];
if(vals.indexOf('&')){
vals = vals.split('&');
for(var i=0;i<vals.length;i++){
settings[vals[i].split('=')[0]] = vals[i].split('=')[1];
autoSetVal(vals[i].split('=')[0],vals[i].split('=')[1]);
}
}else{
settings[vals.split('=')[0]] = vals.split('=')[1];
autoSetVal(vals.split('=')[0],vals.split('=')[1]);
}
}
}
function autoSetVal(tag,val){
var ifm = document.getElementById('ifm1');
ifm[tag] = val;
}
function setVal(tag,val){
settings[tag] = val;
fixURL();
}
function getSURL(){
var sval = location.href;
if(sval.indexOf('?')){
return sval.split('?')[0];
}else{
return sval;
}
}
function fixURL(){
var url = getSURL();
if(settings != {}){
url += '?';
var vals = [];
for(var i in settings){
vals.push(i+'='+settings[i]);
}
url += vals.join('&');
}
location.href = url;
}
window.onload = function(){
autoSet();
}
</script>
</head>
<body>
<iframe id="ifm1" src="http://www.baidu.com" name="x" width="750px" height="500px"></iframe><br />
<input type="text" value="750" id="sw"><input type="button" value="设置宽度" onclick="setVal('width',document.getElementById('sw').value)"><br />
<input type="text" value="500" id="sh"><input type="button" value="设置高度" onclick="setVal('height',document.getElementById('sh').value)"><br />
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<iframe src="xx.hmtl" id="x" name="x" width="100px" height="100"></iframe>
//获得属性
<script type="text/javascript">
var ifr1=document.getElementById("x");
alert(ifr1.src);
alert(ifr1.width);
alert(ifr1.height);
</script>
//修改属性
<script type="text/javascript">
var ifr1=document.getElementById("x");
ifr1.width='200px';
ifr1.height='100px';
</script>
// 指定src属性
<iframe src="http://www.51js.com"></iframe>
<input type="submit" onClick="document.frames[0].location.href='http://www.163.com'">
//获得属性
<script type="text/javascript">
var ifr1=document.getElementById("x");
alert(ifr1.src);
alert(ifr1.width);
alert(ifr1.height);
</script>
//修改属性
<script type="text/javascript">
var ifr1=document.getElementById("x");
ifr1.width='200px';
ifr1.height='100px';
</script>
// 指定src属性
<iframe src="http://www.51js.com"></iframe>
<input type="submit" onClick="document.frames[0].location.href='http://www.163.com'">
追问
你好，你的答案很符合我的要求，但我现在的情况是，我的一个页面中（index.html）有3个iframe，而index.html这个页面有几个超链接，通过这点击这几个超链接去改变这个3个iframe的src属性和他们的宽度，你说的这种方法能获取他们的值了，也能修改他们的宽度，但我只要一刷新页面，iframe的宽度值又回到我当初设定的值了（因为他们是在同一个页面），不是我后面修改的值，请问大哥这种情况该怎么解决呢。。。。十分感谢！！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<?xml version="1.0" encoding="gbk"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>New Page | xHTML1.0 Transitional</title>
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript">
//放大
function ChangeBig() {
var myFrame=document.getElementById("myFrame");
var fWidth=parseInt(myFrame.width);
var fHeight=parseInt(myFrame.height);
if(fWidth<600)
{
myFrame.width=fWidth+20;
myFrame.height=fHeight+20;
}
else {
alert("已经放至最大");
}
}
//缩小
function ChangeSmall() {
var myFrame=document.getElementById("myFrame");
var fWidth=parseInt(myFrame.width);
var fHeight=parseInt(myFrame.height);
if(fHeight>=100)
{
myFrame.width=fWidth-20;
myFrame.height=fHeight-20;
}
else {
alert("已经缩至最小");
}
}
</script>
</head>
<body>
<iframe src="http://www.baidu.com" id="myFrame" name="x" width="200" height="100"></iframe>
<br/>
<input type="button" value="放大" onclick="ChangeBig()"/>
<input type="button" value="缩小" onclick="ChangeSmall()"/>
</body>
</html>
说明：以上代码在IE6和Firefox中测试通过。
看在我辛苦的敲了这么多字符的份上还是给我加点分三，(*^__^*) 嘻嘻……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>New Page | xHTML1.0 Transitional</title>
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript">
//放大
function ChangeBig() {
var myFrame=document.getElementById("myFrame");
var fWidth=parseInt(myFrame.width);
var fHeight=parseInt(myFrame.height);
if(fWidth<600)
{
myFrame.width=fWidth+20;
myFrame.height=fHeight+20;
}
else {
alert("已经放至最大");
}
}
//缩小
function ChangeSmall() {
var myFrame=document.getElementById("myFrame");
var fWidth=parseInt(myFrame.width);
var fHeight=parseInt(myFrame.height);
if(fHeight>=100)
{
myFrame.width=fWidth-20;
myFrame.height=fHeight-20;
}
else {
alert("已经缩至最小");
}
}
</script>
</head>
<body>
<iframe src="http://www.baidu.com" id="myFrame" name="x" width="200" height="100"></iframe>
<br/>
<input type="button" value="放大" onclick="ChangeBig()"/>
<input type="button" value="缩小" onclick="ChangeSmall()"/>
</body>
</html>
说明：以上代码在IE6和Firefox中测试通过。
看在我辛苦的敲了这么多字符的份上还是给我加点分三，(*^__^*) 嘻嘻……
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
