Question

我从此jsfiddle获取此代码它正在努力，但当我试图在我的网站上使用它时它不起作用

您可以看到我的页面here（或运行下面的代码段），似乎没有任何内容被加载到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>

任何人都请帮忙，我是编码的首发，谢谢。

Answer 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>

JQuery：没有任何内容加载到iframe中

1 个答案: