动态更改iframe SRC

Question

我所拥有的并且需要使其正常工作是在“开始页面”中，然后单击类似的按钮：

第1页

<a href="/PAGE-2/" data-iframe-src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&max-levels=1&point=A" class="map-button">Point A</a>

它应该将我发送到“另一页”，在该页面上，我会从URL加载一个iframe，并从URL中获取每个变量（shopID，type，max-levels和point），然后以iframe的方式进行打印：

第2页

<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>

我使用了此javascript代码段，但无论如何，我根本无法使其正常运行。

 $(".map-button").click(function (e) { e.preventDefault(); $("#frame").attr("src", $(this).attr('data - iframe - src')); }); 

我只需要从data-iframe-src中获取变量，然后在iframe中使用它们，但是我无法...问题是我在不同页面中加载了元素，所以我不知道这会如何影响URL变量。

Answer 1

我在这里为我的问题建立了一个简单的解决方案，它对我有用。

首先，我将这个简单的iframe放在了PAGE-2中：

<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>

然后在PAGE-1中，我使用了这种类型的链接：

https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A

因此，现在我的PAGE-2正确加载了URL中的这些参数。 然后，我使用Javascript中的这个简单代码段将我的iframe填充到了PAGE-2中：

<script type="text/javascript">
    $( document ).ready(function() {
        $("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
    });
</script>

而且有效！ 现在，我可以使用所有参数转到PAGE-2，选择它们并在空白iframe中的SRC中使用它们。

感谢您使我走上正确的路！