Question

我有一个我想在iframe中使用的网址。 URL的第一部分保持不变，第二部分因页面而异。所以我想将它们连接在一起并在src语句中使用结果变量。到目前为止我已经

了

<!DOCTYPE html>
<html>
<body>

<script>
var str1="http://bitz.bz/mapplacencia";
var str2="#17/16.51876129/-88.36937785";
var str3=str1+str2;
document.write(str3);
 </script>

<p <img style="display: block; margin-left: auto; margin-right: auto;" src="http://hostbelize.com/hotmobile/general/mobile-legend.png" alt="" width="80% alt=" /></p>
<p <iframe width='80%' height='500px' frameBorder='0' src=str3"></iframe></p>

</body>
</html>

连接正在工作，因为我可以从document.write语句中看到它。我知道src = str3是错误的，但我已经在网上找到了各种各样的例子，但找不到合适的格式。我已经尝试了getElementbyId（str3），因为我认为它给出了变量的值，但这也不对。

任何人都可以给我正确的格式来将此变量传递给src。 Thx - Marie

Answer 1

使用jQuery attr将图片源设置为您已经获得的网址，但仅在加载网页后执行此操作。请参阅this主题。不要忘记设置框架的ID

<script>
    $( document ).ready( function(){
    {
    var str1="http://bitz.bz/mapplacencia";
    var str2="#17/16.51876129/-88.36937785";
    var src = str1+str2;
    $('#frame-id').attr("src", src);
    });
</script>

    <iframe id="frame-id" width='80%' height='500px' frameBorder='0' src='' "></iframe>

Answer 2

首先，您需要一种简单的方法来引用您的iframe，因此请务必在iframe元素中添加id。

然后，使用jQuery确保文档准备就绪，一旦完成，通过选择使用jQuery设置的src在iframe上设置id。

请注意，您未在初始示例中关闭<p>，这可能会导致问题。

以下是这一切应该如何运作的完整示例。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<script>
$(document).ready(function(){
    var str1="http://bitz.bz/mapplacencia";
    var str2="#17/16.51876129/-88.36937785";
    var str3=str1+str2;
    $('#iFrameName').attr('src', str3);
})
</script>

<p>
     <img style="display: block; margin-left: auto; margin-right: auto;" src="http://hostbelize.com/hotmobile/general/mobile-legend.png" alt="" width="80% alt=" />
</p>
<p>
     <iframe id="iFrameName" width='80%' height='500px' frameBorder='0'></iframe>
</p>

</body>
</html>

连接字符串以形成url

2 个答案: