Add a part of URL in Iframe with javascript - javascript

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>

Related

Get and print hash in iframe

I Want to get hash from this url
http://www.mywebsite.com/#/aaaaaaaa
aaaaaaaa
And add to iframe :
<iframe src="http://www.example.com/url/aaaaaaaa" frameborder="0">
Javascript code :
<script>
var hhash = window.location.hash.substr(1);
alert(hhash);
</script>
You can also use the lastIndexOf() function to locate the last occurrence of the / character in your URL, then the substr() function to return the substring starting from that location:
var hhash =(window.location.href.substr(window.location.href.lastIndexOf('/') + 1));
document.write("<iframe src=\"example.com/url/\""+hhash+"frameborder=\"0\">");
Your title and question is a little bit misleading.
If you just want to print the hash tag, you can create an element and set the innerText to your hash, like so:
// Use hash instead of href here! :) This is just to make the example work
const lastPart = window.location.href.split( '/' ).pop();
document.querySelector( '.hash' ).innerText = lastPart;
<div class="hash"></div>
If you want to alter the src of the iFrame, you could use the first example combined with setAttribute.
// Use hash instead of href here! :) This is just to make the example work
const lastPart = window.location.href.split( '/' ).pop();
const src = 'http://example.org/url/' + lastPart;
document.querySelector( '.hash' ).setAttribute( 'src', src );
document.querySelector( '.url' ).innerText = 'iframe points to ' + src;
<iframe class="hash"></iframe>
<div class="url"></div>
You can get hash part (without #/) with:
var hash = window.location.hash.replace('#/', '');
Then you get the current iframe src attribute with :
var src = document.getElementsById('YourIframeId').getAttribute('src');
And now you update the iframe src:
document.getElementsById('YourIframeId').setAttribute('src',src + '/' + hash);

jquery find specific word on src and remove it

I need to find this word 500x462 in a src image att and remove it . Right now the image ends with 500x462 + jpg and i want it to end with image name + jpg
I forgot to say that the website is a wordpress theme generated by php so i need the script to run after the php
Heres a example of the code i want to change
Using a regex:
$("img").each(function(){
$(this).attr('src', $(this).attr("src").replace(/[\d]{3}x[\d]{3}/, ''));
});
This will remove any sequence of [3 digits][the letter x][3 digits] in all images src attribute.
Use the jquery and .replace(), so for example:
HTML:
<img src="http://www.placehold.it/500x462.jpg">
JQuery:
var string = $("img").attr("src");
var new_string = string.replace('500x462', '');
alert(new_string);
Working DEMO.
Assuming that the image src always ends with a file extension.
<img src="ABC500x462blah500x462.jpg">
<script>
var src = $('img').attr('src');
var textToCheck = '500x462';
$('img').attr('src', src.split('.')[0].replace(new RegExp(textToCheck +"$"),"") // check for the text occurring at the end
+ "." + src.split('.')[1]);
alert($('img').attr('src'));
</script>
Example : https://jsfiddle.net/mu2d6qr7/
I wrote a quick jQuery function to do this for you. First parameter is a jQuery selector and second parameter is the string you would like to remove.
window.srcRemoveString = function(selector, string) {
$(selector).each(function(){
var src = $(this).attr('src');
var filename = src.split('/');
filename = filename[filename.length - 1];
var newFilename = filename.replace(string, '');
$(this).attr('src', src.replace(filename, newFilename));
});
}
srcRemoveString('img', '500x462');
Best way to split text in image source
jQuery(".size-post-thumbnail").each(function(){
let src = jQuery(this).attr("src").split("-220x146");
src = src[0]+src[1];
jQuery(this).attr("src", src);
jQuery(this).removeAttr('srcset');
});

pass iframe src from one html page to another

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)

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