用 Div 替换 iframe（（多个）下拉列表相关）答案

【问题标题】：Replacing iframe with Div ( (multiple) dropdown list related)用 Div 替换 iframe（（多个）下拉列表相关）
【发布时间】：2014-05-18 02:19:04
【问题描述】：

我已经编写了第一个下拉列表，以便在第一个列表选择时显示另一个下拉列表。根据第二个下拉列表中的选择，我成功地在同一页面的 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>.

（我真的没有受过训练）但这不起作用。我应该怎么办？提前谢谢你。

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

这是一个演示：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 可能无法加载。

【讨论】：

非常感谢。实际上，我对“您可以使用 JQuery .load”这句话知之甚少，而原来的成功（iframe）页面有
我在这里创建了一个 jsbin 演示：jsbin.com/cilufeta/1/edit 我也会更新一下我的回复。
非常感谢。当我使用单独的 html 文件时，代码一直有效，直到我再次单击 hello。但是，如果我将代码放在 wordpress 的页面中，它不会显示任何内容。（我原来的 iframe 版本在 wordpress 的一个页面内）我会继续努力。