【问题标题】:JQuery:nothing is loaded into iframe [duplicate]JQuery:没有将任何内容加载到iframe中[重复]
【发布时间】:2017-05-15 19:05:23
【问题描述】:
我从jsfiddle 中获取了此代码
它正在努力,但是当我尝试在我的网站上使用它时它不起作用
你可以看到我的页面here(或运行下面的sn-p)似乎没有加载到iframe中
下面是我的短代码
<html>
<head>
<title>DROPDOWN</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="width:880px">
<select id="selector">
<option value="0">select year</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2000.html">2000</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2005.html">2005</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2008.html">2008</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2010.html">2010</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2015.html">2015</option>
</select>
<div>
<iframe src="about:blank" frameborder="0" id="iframeId"></iframe>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
$(document).ready(function(){
$("#selector").change(function(){
$("#iframeId").attr("src", $(this).val());
});
});
</script>
</body>
</html>
请大家帮忙,我是编码初学者,谢谢。
【问题讨论】:
标签:
javascript
jquery
html
iframe
【解决方案1】:
问题是您试图使用一个script 标记来链接到JQuery 并嵌入您的页面脚本。单个<script> 元素可用于链接到外部脚本:
<script src="PATH HERE"></script>
...或嵌入内部脚本:
<script>
// Code here
</script>
...但不能同时两个。
只需关闭外部脚本,然后为您的页面级脚本打开另一个脚本,代码就可以工作。
<html>
<head>
<title>DROPDOWN</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="width:880px">
<select id="selector">
<option value="0">select year</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2000.html">2000</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2005.html">2005</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2008.html">2008</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2010.html">2010</option>
<option value="http://www.sagisepr.com/CLEANMAPS/takeback_policymap_2015.html">2015</option>
</select>
<div>
<iframe src="about:blank" frameborder="0" id="iframeId"></iframe>
</div>
<!-- A script tag can be used to reference an external script, like this: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Or, an internal script, like this: -->
<script>
$(document).ready(function(){
$("#selector").change(function(){
$("#iframeId").attr("src", $(this).val());
});
});
</script>
</body>
</html>