I have a custom Wordpress page, with 2 text input boxes, one for "yourvarname" and the other for "key"and an iframe displaying a google document.
Both these Text boxes are populated from variables obtained from the url. This works fine.
What I would like to do:
Have the iframe display the document as named in the textbox, yourvarname.
this is what I have so far
<?php /* Template Name: CustomPageT1 */ ?>
<p><input id="yourvarname" type="text" value="" /> <input id="key" type="text" value="" />
<script type="text/javascript">// <![CDATA[
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = c;
document.getElementById("key").value = d;
// ]]></script>
</p>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vTCJM2gUN4_aesXjEB7XtKWu0dB8anwWkjgolj1zRLU2aJieScUXF6WXzMbjYXs7g/pub?embedded=true"
width="110%"
height="500"
class="myIframe">
<p>Hi SOF</p>
</iframe>
<script type="text/javascript" language="javascript">
$('.myIframe').css('height', $(window).height()+'px');
</script>"
<script type="text/javascript" language="javascript">
global $wp_query;
if (isset($wp_query->query_vars['yourvarname']))
{
print $wp_query->query_vars['yourvarname'];
}
</script>
enter code here
Let's start with basic information. In Javascript you can get your iframes like this:
document.getElementsByTagName("iframe")
Since you have a single iframe, you can get it like this:
document.getElementsByTagName("iframe")[0]
but it would potentially save you from trouble to give an id to this tag. Let's define the src of your iframe
document.getElementsByTagName("iframe")[0].src = "somevalue";
Okay, let's apply this in your script:
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
document.getElementById("key").value = d;
However, if you want it to change when the input changes, then you will need to define a change event for it.
so this is what i added, perhaps incorrectly, as i am now getting 404 error and nothing is displayed
<script type="text/javascript" language="javascript">
document.getElementsByTagName("iframe")[0].src = "yourvarname";
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
document.getElementById("key").value = d;
</script>
Related
I want to combine userinput from a textfield with a preset url,
to then form a new url that is to be written into the dom below after pressing a button
My current code looks like this:
<body>
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<html>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value,
src = ' val,
var link = document.getElementById("link");
var a = document.createElement('a');
var linkText = document.createTextNode("pixivuser");
a.appendChild(linkText);
a.title = "pixivuser";
a.href = "https://rsshub.app/pixiv/user/" + pixivuser";
document.body.appendChild(a);
}
</script>
</body>
</html>
The base url here is: https://rsshub.app/pixiv/user/
and it is supposed to have a numeral added right after, defined by userinpu.
(the default result in this case is https://rsshub.app/pixiv/user/4165980 )
I can't quite figure out the part to combine and then write into the dom below,
something might be missing ?
You just have some typing mistakes and then your code will work. The input with the id pixivurl has the user id. And you are getting it and assigning it to the href property of the link element. If you want the url to be also the text of the link element then put it in the textNode you have created.
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value;
var url = "https://rsshub.app/pixiv/user/" + val;
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "pixivuser";
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
</script>
If I set the URL to exmaple.com?blank=true a blank page should be presented.
Using JavaScript or jQuery i want a short snippet that looks for ?blank=true in the url and if it finds it than the page to turn white or blank.
Try like this
var url_string = "https://example.com?blank=true "; //window.location.href
var url = new URL(url_string);
var blank = url.searchParams.get("blank");
if(blank){
document.getElementsByTagName("body")[0].style.display = "none";
}
<body>
<p>this will be hidden</p>
</body>
wrap your html content in a element like this
<html>
<body>
<div id="wrapper">
<!-- ********your content here******** -->
</div>
</body>
</html>
use jquery code as
$(document).ready(function() {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('=');
if(sURLVariables[0]=="blank" && sURLVariables[1]=="true")
{$('#wrapper').css('display','none');}
else{
$('#wrapper').css('display','block');
}
});
With jQuery
var blank = /(?<=blank=)[^&?]+/g.exec('https://example.com?blank=true')[0];
if(blank === 'true'){
$('body').hide();
}else{
$('body').show();
}
I am newbie in JS but I managed to create the code thanks to the feedback from users of this site. Explain the code first:
The objective is to create a URL link basing on two pages (A and B).
The page A loads a cookie using a hidden form. This page also contains a link that redirects to page B:
// CODE FROM SOURCE PAGE A //
TO PAGE B
<form name="sender">
<input type="hidden" name="message" size="30" value="customvalue"/>
</form>
<script type="text/javascript">
function setCookie(value) {
document.cookie = "cookie-msg-test=" + value + "; path=/";
return true;
}
function updateMessage() {
var t = document.forms['sender'].elements['message'];
setCookie(t.value);
setTimeout(updateMessage, 100);
}
updateMessage();
</script>
Page B has a list of links with different values assigned. With JS call the cookie from page A and assign it to a variable. When we click on a link assign the value to another variable. JS creates the new URL with these two variables and redirects.
// CODE FOR DESTINATION PAGE B //
<a id="LNK" href="#" value="value_for_url" onclick="clickLink(this)">CUSTOM REDIRECTION</a>
<a id="LNK" href="#" value="other_value_for_other_url" onclick="clickLink(this)">OTHER CUSTOM REDIRECTION</a>
// RECEIVE THE COOKIE FROM SOURCE PAGE A //
<script type="text/javascript">
function getCookie() {
var cname = "cookie-msg-test=";
var ca = document.cookie.split(';');
for (var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(cname) == 0) {
return c.substring(cname.length, c.length);
}
}
return null;
}
// PASTE THE COOKIE AND THE VALUE OF PAGE A AND REDIRECT //
function clickLink(a) {
var url_part_from_a = a.getAttribute('value');
var url_part_from_cookie = getCookie();
window.location.assign("http://domain/"+url_part_from_a+url_part_from_cookie)
return false;
}
</script>
As will be different pages A with different valors of cookies I would modify the page A code so that when you click on the link assign the value to the cookie and not before.
Any ideas? Thanks in advance
Solved!
CODE FOR PAGE A:
<html>
<body>
LINK TO PAGE B
<script type="text/javascript">
function clickLink(a) {
var url1 = a.getAttribute('value');
document.cookie = 'cookiename=' +url1+'; expires=Wed, 1 Jan 2070 13:47:11 UTC; path=/';
}
</script>
</body>
</html>
CODE FOR PAGE B
<html>
<body>
<a id="LNK" href="#" value="custom_code_b" onclick="clickLink(this)">JS REDIRECT</a>
<script type="text/javascript">
function getCookie(cookiename)
{
var re = new RegExp(rgcookie + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
var url1 = getCookie("cookiename");
function clickLink(a) {
var url2 = a.getAttribute('value');
window.location.assign("http://domain/"+url1+url2);
}
</script>
</body>
</html>
Trying to do the following:
Store params from url, i.g. mydomain.com/page.html?cid=123456
If a user clicks on a button (they have a class of .btn-cta) it will take the params ?cid=123456 and add them to the new page those buttons link to /tour.html
I'm currently doing 1/2 of that with passing the params to an iframe on the page, now I need to get the above part working:
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById("signupIndex"),
btn = $('.btn-cta');
iframe.src = iframe.src + '?' + params;
Here's how I'd do it using jquery:
$('.btn-cta').each(function(i, el){
let $this = $(this); // only need to create the object once
$this.attr({
href: $this.attr("href") + window.location.search
});
});
And in Vanilla ES2015
document.querySelectorAll('.btn-cta')
.forEach(el => el.attributes.href.value += window.location.search);
This takes all the elements that have class .btn-cta and appends the page query string to each of their href attributes.
So if the page url is `http://domain/page.html?cid=1234
Tour
becomes
Tour
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
var loc = window.location.href;
var params = loc.split('?')[1];
$(".btn-cta").click(function(){
window.open("tour.html?"+params,'_self',false);
});
});
</script>
</head>
<body>
<button type="submit" class="btn-cta">Click Me</button>
</body>
</html>
I am having an html page consisting of an iframe:
<html>
<body>
<iframe id = "i1" name = "i1" src = "C:\Documents and Settings\adivekar\Desktop\sa.html"></iframe>
<br><input type = "text" name = "t1" id = "One"/>
<br><input type = "button" value = "change1" name = "b1" onclick = "call1()">
<script type = "text/javascript">
function call1(){
var a = document.getElementById('i1');
var b = a.contentDocument;
b.open()
var c = b.getElementById('Two');
c.value = "dfsdf";
}
</script>
</body>
The page containing iframe is:
<html>
<body>
<input type = "text" name = "t2" id = "Two"/>
</body>
</html>
I am unable to update the value of textbox in the iframe.
If the iframe doesn't come from the same domain as the main document, you will not be able to access the iframe's document. If it does, your code should work in most browsers. I'd change it slightly for browsers that don't support the contentDocument property of ifame elements, and remove the call to the iframe document's open() method, which is unnecessary and possibly problematic:
function call1(){
var a = document.getElementById('i1');
var b = a.contentDocument || a.contentWindow.document;
var c = b.getElementById('Two');
c.value = "dfsdf";
}
Try
document.getElementById('i1').getElementById('Two').value = "..";