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 = "..";
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>
I am trying to make a form that goes like this:
You enter a URL into a text box.
You click a button and it opens an about:blank page in a new tab.
This page has an iframe that fills the whole screen and the src is set to the link you entered in the text box.
This is what I have tried but whatever I choose opens blank, I am using google.com as the example here.
<!DOCTYPE html>
<html>
<head>
<title>about:blank | 3kh0</title>
</head>
<body>
<script>
function create() {
var url = document.getElementById('input');
var win = window.open();
win.document.body.style.margin = '0';
win.document.body.style.height = '100vh';
var iframe = win.document.createElement('iframe');
iframe.style.border = 'none';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.margin = '0';
iframe.src = url;
win.document.body.appendChild(iframe);
}
</script>
<input type="text" value="https://www.google.com/" placeholder="https://google.com" id='input' autofocus>
<button onclick='create()'>Create!</button>
</body>
</html>
If you have any ideas on how I can do this that would be amazing! :)
You should add ".value" at the end of line 9.
from
var url = document.getElementById('input');
to
var url = document.getElementById('input').value;
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>
I am trying to create a dynamic webform on SharePoint and I am having an issue when trying to set the types of the elements with JavaScript and DOM.
I tried setting other types such as file, numeric, but they throw the same error (Member Not Found)
objElement = document.createElement("div");
objAttribute = document.createAttribute("class");
objAttribute.value = "container";
objElement.setAttributeNode(objAttribute);
objElement.appendChild(document.createTextNode("Client Name"));
objInput = document.createElement("input");
objAttribute = document.createAttribute("style");
objAttribute.value = "margin-left:70px;padding-left:10px;height:25px;border-color:RGB(184, 184, 184)";
objInput.setAttributeNode(objAttribute);
objAttribute = document.createAttribute("type");
objAttribute.value = "text";
objInput.setAttributeNode(objAttribute);
Error only occurs when setting the type attribute.
Create the input textbox control like this:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a Text Field.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");
document.body.appendChild(x);
}
</script>
</body>
</html>
Something weird is happening here.
My website is using javascript to create dynamic divs, but although they are entered into the DOM (at least this is what I think), javascript returns null when calling that div.
This is the javscript code which is loaded before </body>
function AddPlayer(){
var name = document.getElementById('name').value;
createBox(name);
};
function createBox(name){
var span = document.createElement('span');
span.id = name;
span.innerHTML = name;
document.getElementById("gameArea").appendChild(span);
var span = document.createElement('span');
span.id = "score-" + name;
span.innerHTML = "0";
document.getElementById("gameArea").appendChild(span);
var inputSText = document.createElement('input');
inputSText.type = "button";
inputSText.value = "Add Points";
inputSText.onclick = function(){AddPoints(name);};
document.getElementById("gameArea").appendChild(inputSText);
};
function AddPoints(player){
document.load(document.getElementById("#score-"+ player).innerHTML = "Please work");
};
<html>
<head>
<title>Game Score Keeper</title>
</head>
<body>
<h2>Game Score Keeper</h2>
<input type="text" id="name" />
<input type="button" value="Add Player" onclick="AddPlayer()" />
<div id="gameArea">
</div>
<script src="index.js"></script>
</body>
</html>
Here is the jsfiddle of this project http://jsfiddle.net/jwmm6rk7/
You need to pass the id of the element to document.getElementById. That is, without the hash (#) symbol.
function AddPoints(player) {
document.load(document.getElementById("score-" + player).innerHTML = "HELLO");
};
lookslike you were jQuery user, you used # and name instead of player
function AddPoints(player) {
document.getElementById("score-" + player).innerHTML = "HELLO";
};