Question

所以我试图创建一个可以替换iframe的src的函数。在iframe中会有一个有两个地方的地图。在html代码中，地点ID-s有两种形式。

我无法让它发挥作用。

这是HTML代码：

<div id="start">
    <label for="startLocation">Start location ID:</label>
    <input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>

<div id="dest">
    <label for="destination">Destination ID:</label>
    <input type="text" id="destination" name="destination" ><br><br>
</div>

<button onclick="changeMap()">Show the map!</button><br><br>

</form>


<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>

这将是功能：

function changeMap(){

//place IDs to put into url
var start = document.getElementById('startLocation').value;

var dest = document.getElementById('destination').value;


//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";

var mapSource2 = "&destination=place_id:";

var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";

var mapSource = mapSource1+start+mapSource2+dest+mapSource3;

//iframe
var iframe = document.getElementById('map');

//changing the src of the iframe
iframe.src = mapSource;


}

Answer 1

该行

<button onclick="changeMap()">Show the map!</button><br><br>

可能导致问题。

首先，button元素（如果没有给出type="button"）被视为submit个按钮。所以每次按下按钮，表单都会被提交，浏览器开始加载一个不同的页面，然后JavaScript就有时间做了很多。

其次，我看到你正在使用onclick来附加事件处理程序。如果您的脚本必须高于 HTML中的form，则会导致changeMap未定义。我建议用JavaScript附加事件处理程序，如下所示：

<button type="button" id="show-map">Show the map!</button><br><br>

var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);

请注意，因为这是在这里选择button元素，所以script标记必须放在下面 button（所以按钮是周围 - 不能选择任何东西！）或JavaScript需要放在document.onReady函数中，以便脚本在页面完成加载之前不会触发（这意味着button将是满载）。

除非您使用document.onReady，否则script代码和button的顺序确实很重要。如果script引用button，则button首先出现。如果button引用script，script必须先出现。

在某种document.onReady中包装是常见做法。 jQuery有一个函数（$.ready），可用于执行此操作，但如果你是勇敢的you can also do it without jQuery。

另外，请记住addEventListener不适用于较旧的IE。你可以polyfill it或使用jQuery。

如何使用javascript更改iframe源代码？

1 个答案: