Javascript 将iframe替换为Div（（多个）下拉列表相关）_Javascript_Jquery_Html_Css_Iframe

Javascript 将iframe替换为Div（（多个）下拉列表相关）

javascript jquery html css iframe

Javascript 将iframe替换为Div（（多个）下拉列表相关）,javascript,jquery,html,css,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" ></ifram

我写了第一个下拉列表，在第一次选择列表时显示另一个下拉列表。根据第二个下拉列表中的选择，我成功地在同一页面的iframe中显示了不同的内容，即我自己网站的不同html文件。一切都好。然而，我怀疑iframe不适合SEO，所以我决定使用DIV来代替iframe。请原谅我从未接受过php、html等方面的培训

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

是原始的成功代码

下面列出了部分（尽管不是全部）相关的Java脚本

<script type="text/javascript">
    function SetIFrame()
    {
        myFrm = document.getElementById('myIFrame');
        myFrm.src = document.mapform.jump.options[document.mapform.jump.selectedIndex].value;
    }
 </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="/1.html">1</option>
<option value="/2.html">2</option>
<option value="" selected="selected">hello</option>
</select></form>

下面列出了部分（但不是全部）相关html代码

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

我真的没有受过训练，但这不起作用。我该怎么办？提前感谢您。

这里是一个演示：

如果您使用的是JQuery，那么您可以使用（如下所述）将页面内容加载到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页面有code.JQuery.com/JQuery-1.5.2.js>。我尝试了你的代码，但是因为我不太了解可以使用JQuery.load的短语，所以我没有得到预期的结果。我在这里创建了一个jsbin演示：我还将更新我的回复。非常感谢。当我使用一个单独的html文件时，代码会一直工作，直到我再次单击hello。然而，如果我把代码放在wordpress的一页中，它什么也不显示。我最初的iframe版本在wordpress的一页中，我将继续尝试。