javascript - 用 Div 替换 iframe((多个)下拉列表相关)

标签 javascript jquery html css iframe

我已经编写了第一个下拉列表以在第一个列表选择时显示另一个下拉列表。根据第二个下拉列表中的选择,我在同一页面的 iframe 中成功显示了不同的内容(即我自己站点的不同 html 文件)。一切都没事。 但是,我怀疑iframe对SEO不好,所以我决定用DIV来代替iframe。请原谅我从未接受过 php、html 等方面的培训。

<iframe id="myIFrame" name="Frame1" width="945" height="460"  frameborder="0" ></iframe>

是原来的成功代码。

(下面列出了部分(但不是全部)相关的 javascript)

<script type="text/javascript">
    function SetIFrame()
    {
        myFrm = document.getElementById('myIFrame');
        myFrm.src = document.mapform.jump.options[document.mapform.jump.selectedIndex].value;
    }
 </script>

(下面列出了部分(但不是全部)相关的html代码)

<form name="mapform" method="post">                     
<select name="jump" id="jump" size="1" style="width: 250px !important; min-width: 250px; max-width: 250px;background-color:#00FF99;" onchange="SetIFrame()"  >
<option value="/1.html">1</option>
<option value="/2.html">2</option>
<option value="" selected="selected">hello</option>
</select></form>

我试过

<div id="myIFrame"></div> 

或者用类似的东西代替

<iframe id="myIFrame" name="Frame1" width="945" height="460"  frameborder="0" ></iframe>. 

(我真的没受过训练)但这不行。我应该怎么办?提前谢谢你。

最佳答案

这是一个演示:http://jsbin.com/cilufeta/1/edit

如果您使用的是 JQuery,则可以使用 JQuery's load command ,如下所示,将页面内容加载到您的 div 中,类似于将页面内容加载到 iframe 中。

确保在您的页面上设置了 JQuery:

<body>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<script>

function SetIFrame()
{
   $('#myIFrame').load(document.mapform.jump.options[document.mapform.jump.selectedIndex].value);
}

$(document).ready(function() {
$("#jump").select(function() {
  SetIFrame();
   });
});

</script>

<form name="mapform" method="post">                     
<select name="jump" id="jump" size="1" style="width: 250px !important; min-width: 250px; max-width: 250px;background-color:#00FF99;" onchange="SetIFrame()"  >
<option value="http:/yoururl/1.html">1</option>
<option value="http:/yoururl/2.html">2</option>
<option value="" selected="selected">hello</option>
</select></form>

<div id="myIFrame" style="width:945px; height:460px"></div>

</body>

请注意,如果您从其他网站加载页面,则可能存在安全限制。由于访问限制,来自不同站点的 HTML 可能无法加载。

关于javascript - 用 Div 替换 iframe((多个)下拉列表相关),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23708604/

相关文章:

javascript - 在 jquery、Chrome 和 IE 中使用 UP/DOWN 键时停止元素滚动?

javascript - 使用附加到 div 的 javascript 创建 iframe

javascript - 如何按类在div中动态添加div - Jquery

php - jquery 序列化和 $.post 并在服务器端接收不完整的数组

javascript - 如何在 jQuery datepicker 中仅选择周开始日期

javascript - canvas 的 HTML 属性(宽度,高度)独立变化

javascript - 将显示 div 的 jQuery 转换为纯 JS

javascript - 我们如何使用 php mysql 给已经存在的电子邮件 ID?

javascript - 如何在javascript中删除函数的对象?

java - 如何根据单击的单选按钮在新表中显示值?