Concatenate strings to form url

Question

I have a url that I want to use in an iframe. The first part of the URL stays the same, the second varies by page. So I want to concatenate them together and use the resulting variable in the src statement. So far I have

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

The concatenation is working as I can see it from the document.write statement. And I know src=str3 is wrong but I've looked at various examples here and elsewhere on the web and cannot find the right format. I've tried getElementbyId(str3) as I thought that gave the value of the variable but that is not right either.

Can anyone give me the correct format to pass this variable to the src. Thx - Marie

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

Use jQuery attr to set the image source to the url that you already got, but do this only after the page is loaded.See this topic also.Don't forget to set an ID to the frame

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

edited May 23 '17 at 12:27

Community

1
1

answered Oct 02 '14 at 21:31

Unix von Bash

735
5
20

Thanks but it is not the image (mobile-legend.png)that is causing the problem. It is the second line where it displays the map page in the iframe.
– Marie Carroll Rigby Oct 02 '14 at 21:34
Yeah, my mistake. But it is the same way to do it – Unix von Bash Oct 02 '14 at 21:40
Including the jQuery library as suggested above makes this work. – Marie Carroll Rigby Oct 05 '14 at 17:11
@MarieCarrollRigby: yes, i assumed that you did this since i specified to use jQuery. Good thing it is working now :) – Unix von Bash Oct 06 '14 at 09:39

score 0 · Answer 2 · answered Oct 02 '14 at 21:59

First, you'll want an easy way to reference your iframe, so make sure to add an id to the iframe element.

Then, use jQuery to make sure the document is ready, and once it is, set the src on the iframe by selecting the id you set using jQuery.

Note, you didn't close your <p> in your initial example which could be causing issues.

Here's a full example of how this all should work.

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

This does work - it doesn't solve my problem, but that is a different issue with Safari! Thx. — Marie Carroll Rigby, Oct 05 '14 at 17:11

Concatenate strings to form url

2 Answers2