So trying to figure out how to do this with window.location in Javascript. I'm sending users to our site with an appended URL with a Google Analytics code that I need to pass to an iframe src on that page. I'd assume Javascript could do this (note - I cannot use PHP)...
This is what I want to do:
I'd send users to the page with all the campaign data in tact. For example a user would click on this link:
http://www.xyz.com/index.html?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click
They would be directed to that page, that then has this iFrame on it. The code on the store side would need to pick up utm_source, utm_campaign, utm_medium and include these parts in the IFRAME SRC So this bit:
<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis"></iframe>
now becomes:
<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click"></iframe>
Any javascript suggestions would be greatly appreciated. Note - I cannot use PHP.
UPDATE:
Got this to work!! Yay, but now I need to edit it a bit:
So say the appended url that was clciked was this:
http://abc.com/index.html?apple&orange&peach
and I need the iframe src to be this
http://xyz.com/minis?orange&peach
I moved a few things around in the script, but is now only grabbing orange and not the other & attribute (peach). please advise if there is a better way to work (without have all the params and then depending on what link comes in, some of the & will be undefined:
<body>
<script type="text/javascript">
$(function() {
var loc = window.location.toString(),
params = loc.split('&')[1],
params2 = loc.split('&')[2],
params3 = loc.split('&')[3],
params4 = loc.split('&')[4],
params5 = loc.split('&')[5],
params6 = loc.split('&')[6],
iframe = document.getElementById('myIframe');
alert(iframe.src);
iframe.src = iframe.src + '?' + params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5;
alert(iframe.src);
});
</script>
<iframe id="myIframe" src="http://www.xyz.com/minis"></iframe>
</body>
This little snippet should do, here all you have to do is grab the bit after ? as a string and append it to the iframe source.
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById('myIframe');
iframe.src = iframe.src + '?' + params;
Just use window.location.search.
const iframe = document.getElementById('frame');
iframe.src = iframe.src + window.location.search;
Related
i want to add last part of url in iframe
suppose my url is http://myweb.com/123456/
i want to add 123456 in iframe like
<iframe src ="http://myweb.com/demo.html?user=123456"></iframe>
Please Help, Thanks in advance
Here the solution. Purely using JavaScript no jQuery.
Steps:
Extract url's last part.
Get the iframe element using it's id
Get the current value of src attribute of iframe
Append the concatenate the extracted last part of url to current value of src
Update the attribute value
var url = "http://example.com/12345";
var lastPart = url.split('/').pop();
console.log("Last part of url: " + lastPart);
var myIframe = document.getElementById('myIframe');
var iframeSrc = myIframe.getAttribute("src");
console.log("Initial src value: " + myIframe.getAttribute("src"));
myIframe.setAttribute("src", iframeSrc + lastPart);
console.log("src after appending: " + myIframe.getAttribute("src"));
<iframe id="myIframe" src ="https://example.com?user="></iframe>
You can just the following to add any values you may need to the end of the src (Note this is jQuery, so this may not be what you are interested in):
var value = "123456";
$('iframe').attr('src', $('iframe').attr('src') + value);
document.write("New URL: " + $('iframe').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe src ="http://myweb.com/demo.html?user="></iframe>
I have two html webpages. One page has a 'div' named "iframe-content" .
When I click on the div, it should set the iframe src in the second html page.
Page 1:
<div class="iframe-content" onclick="passIframe()">
//div which should set the iframe src on the other page on clicking
</div>
Page 2:
<iframe src="about:blank" id="native-iframe" width="450" height="180"scrolling="no">
//The iframe which should obtain the source from the first page
</iframe>
Whenever I click the "iframe-content" ,it should open the html page 2 and it should also set the "native-iframe" source as I wish.
Is there any efficient way to do it?
You can send the url as a query parameter and on page2, you can read and set it to the iframe. Something like this:
// Page1:
function passIframe() {
var url = ""; // The url to pass
window.location.href = "/page2.html?url=" + url;
}
// Page2:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var src= getParameterByName("url");
$("iframe").attr("src", url);
Note: the getParameterByName is just a function to get the query string parameter from the URL. I copied this function from this Stackoverflow question, but there are many other solutions to do this task.
YOu can set iframe src attribute to your desired url
$('iframe').attr('src', url)
In short, I want to pass the site url of the user which uses the following code:
<script type='text/javascript'>
var url = document.location.href;
</script>
<iframe src="http://localhost/page.php?site=242333&u=" + url + " scrolling="no" frameborder="no" style="border:none; overflow:hidden;" onload="this.width = this.contentDocument.body.scrollWidth; this.height = this.contentDocument.body.scrollHeight" />
The problem in the following part:
src="http://localhost/page.php?site=242333&u= [" + url + "]
How can I concatenate the JavaScript variable with the url?
you cannot use javascript variable in html code. Just fill the src attr of tag with javascript like for example:
<iframe id="frame" src=""> ... //rest of html
<script type='text/javascript'>
var url = document.location.href;
document.getElementById("frame").src = "http://localhost/page.php?site=242333&u=" + url + ... //rest of src
</script>
HTML
<iframe src="http://localhost/page.php?site=242333&u=" id="iframe"></iframe>
JavaScript (jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript'>
var url = document.location.href, getIframe = $("#iframe").attr("src");
$("#iframe").attr("src", getIframe + encodeURIComponent(url));
</script>
You can't use a JavaScript variable in your HTML markup like you're trying to do. It just doesn't work. What you can do is set the frame's source in a script that comes right after the iframe in your HTML. So, something like:
<iframe scrolling="no" frameborder="no" style="border:none; overflow:hidden;" onload="this.width = this.contentDocument.body.scrollWidth; this.height = this.contentDocument.body.scrollHeight" id="pageFrame"/>
<script type='text/javascript'>
window.addEventListener('load', function() {
var url = document.location.href;
document.getElementById("pageFrame").src =
"http://localhost/page.php?site=242333&u=" + encodeURIComponent(url);
}
</script>
Note that I added an ID to your iframe so that it could be accessed through document.getElementById() Also, I used the JavaScript encodeURIComponent so that the string in your url variable would be safely encoded for your source URL. This will require a corresponding decode on the server side, and since it looks like you're using PHP, that would be done using the urldecode() function.
I'm not sure if this is possible, but I want to do the following:
I've got webpages, called 1.html , 2.html , 3.html etc. Now I have the following code for 1.html:
<object width="100%" data="1.svg" type="image/svg+xml">
and for 2.html, I would get 2.svg. etc. Now I want to make something like 100 pages like this, and I'm wondering if it is possible to do this automaticly using javascript or jquery ? So something like:
<object width="100%" data="[here some script that get the name of htm file].svg" type="image/svg+xml">
Any ideas ?
Try this:
jQuery
var url = document.location.pathname;
url = url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."));
$('object').attr('data', url + '.svg');
Javascript
var url = document.location.pathname;
url = url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."));
document.getElementsByTagName('object')[0].setAttribute('data',url + '.svg');
Or this:
PHP
<object data="<?php echo basename(__FILE__, ".htm"); ?>.svg"></object>
use
var currentDoc = document.location.pathname
var currentSVG = currentDoc.match(/\d+\) + ".svg";
Lets say I have a function like this:
<script type="text/javascript">
function ReturnURL()
{
var url = document.URL;
var url2 = url.split("=");
var urlID = url2[url2.length-1];
//window.open('http://localhost/POSkill/skillshow.aspx?user_id =' + urlID);
return urlID;
}
</script>
And I also have iframe in my html file which is something like below:
<iframe id="showSkill" scrolling="yes" src="http://localhost/POSkill/skillshow.aspx?user_id = ReturnURL()" height="350" runat="server" ></iframe>
Now all I want to do is to send the urlID value of javasrcipt as the user_id value in iframe. I have tried by using user_id = ReturnURL() but its not working.
How can I do this?
Thanks in Advance.
I answered something very similar at enter link description here
The answer is that you must set the "src" value on the JS rendering.
This means that somewhere in your javascript you should have the following code
...
document.getElementById("showSkill").src="http://localhost/POSkill/skillshow.aspx?user_id =" + ReturnURL()
...
This should work just fine.