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.
Related
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>
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";
Here is the initial HTML, it is fairly small. It's only meant to be the loading screen.
<html>
<head>
<title>Simple Hello World</title>
<link href="rapid-ui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rapid-ui.js"></script>
</head>
<body>
This is the body of the page.
</body>
</html>
The "rapid-ui.js" will generate an HTML string, this will be a full document - including DOCTYPE, head, meta, scripts, css, etc. After it is done generating the HTML it should then display that HTML on top of the page in an iframe in the same way as if the "src" of that iframe was set to a URL that generated that same HTML string.
I tried this:
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>');
iframe[0].src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.appendTo('body');
}
It doesn't seem CSS or scripts are executed properly.
This doesn't work either
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>');
iframe[0].innerHTML = html;
iframe.appendTo('body');
}
You cannot just insert data into an iframe before it is appended to the dom. Try this
function showHTML(html) {
$('<iframe id="display" frameborder="0">').appendTo('body')
.contents().find('body').append(html);
}
Here is another way if you need to edit the head.
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0">').appendTo('body');
var doc = iframe[0].contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
I found from here: Creating an iframe with given HTML dynamically a possible solution
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>').appendTo('body');
var doc = iframe[0].contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
This solution seems to work.
Try this:
function showHTML(html) {
var iframe = '<iframe id="display" frameborder="0"></iframe>';
$("body").append(iframe).append(html);
}
append will append within the element
If you need to edit the src of the iframe instead... do this:
function showHTML(html) {
var iframe = '<iframe id="display" frameborder="0"></iframe>';
$("body").append(iframe).attr("src", "data:text/html;charset=utf-8," + encodeURI(html));
}
or this:
function showHTML(html) {
var fSrc = "data:text/html;charset=utf-8," + encodeURI(html);
var iframe = '<iframe id="display" src="\" + fSrc + "\" frameborder="0"></iframe>';
$("body").append(iframe);
}
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;
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.