Passing javascript variable from iframe to URL - javascript

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.

Related

How can I use JavaScript to view the source code of all websites?

I want to have JavaScript to get a user's URL and return the source code of the website. I want to have this to essentially make an iframe, but with the actual code.
E.g. :
let userUrl = prompt("What website do you want displayed?","e.g. https://www.google.com");
function getSource(url){
//some code
return pageSource;
}
document.body.innerHtml=getSource(userUrl);
I tried to scrape a view page source website and turn it into an API that I could inject into JavaScript, but I had no luck.
<html>
<head><meta charset="us-ascii">
<title></title>
<script>
let userUrl = prompt("What website do you want displayed?","e.g.
https://www.google.com");
if (userUrl){
var srcFrame=""; //complete page code to inject into your iframe or return
var fetchMe = "https://example.com?q=" + userUrl;
fetch(fetchMe).then((response) => response.text()).then((text) => {
srcFrame = text;
//if injecting into iframe
myFrame.document.open();
myFrame.document.write(srcFrame);
myFrame.document.close();
// USE THE FOLLOWING TO ADD THE ORIGINAL URL AS THE baseURI SO RELATIVE
//LINKS & SCRIPTS WILL WORK AND ACCESS THE ORIGINAL SOURCE AND NOT YOUR
//SERVER
var addOrigBase= document.createElement('base');
addOrigBase.setAttribute('href',userUrl);
document.getElementById("myFrame").contentDocument.head.appendChild(addOrigBase);
});
};
</script>
</head>
<body>
<iframe onload="myFrame.frameElement.height =
(myFrame.frameElement.contentDocument.body.clientHeight)+10" frameborder=""
height="25px" id="myFrame" name="myFrame" scrolling="no" src="about:blank"
width="100%"></iframe>
</body>
</html>

Html Get Src Id From Iframe Javascript

Looking to find how to define a variable to only the numbers "1214693" in console based on the url withing the iframe, I've tried "document." but I almost never use html nor javascript so I'm really unsure of how to go about this.
<iframe src="/build/upload?groupId=1214693" id="upload-iframe" frameBorder="0" scrolling="no" style="width:100%; height:175px; margin-left:10px"></iframe>
It's in the window object, not document.
Use this code in your iframe .html:
console.log(window.location.href)
and it will log the URL.
Then it is a simple matter to tokenize URL and extract data:
// thanks to http://stackoverflow.com/questions/11582512/how-to-get-url-parameters-with-javascript/11582513#11582513
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
}
if (window.console) {
var idParam = getURLParameter('id');
console.log(idParam);
}
Not sure if this is what you're looking for but if you'd like the change the URL and have the id be parameterized then you'll want to do something like this:
<script type="text/javascript">
var id = 1214693;
$(document).ready(function() {
$('#iframe').attr('src', '/build/upload?groupId=' + id);
})
</script>

add javascript variable to 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.

Use url name to set name of image

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

Capture incoming URL Parameters, then pass to iFrame Src with Javascript

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

Categories

Resources