Submit text value into iframe input - javascript

I want to send a text value from the parent page to the iframe < input >. It's all on the same domain and folder.
Was trying this code:
function addNick(nick) {
var txt = parent.document.getElementById('input').value;
parent.document.getElementById('mess').value = 'to[' + nick + '] ' + txt;
parent.document.getElementById('mess').focus();
}
<iframe src="input.php" name="input" id="input" scrolling="auto"></iframe>
Text is triggered in mess.php to be submitted with link to the above iframe input.
name
which is printed in index.php with js
$(document).ready(function(){
setInterval(function(){//setInterval() method execute on every interval until called clearInterval()
$('#load_posts').load("mess.php").fadeIn("slow");
//load() method fetch data from mess.php page
}, 1000);
});
So basically the addNick code won't work.
Any help will be much appreciated.
FINAL SOLUTION
function addNick(nick) {
var iframe = document.getElementById('iframe');
//the element you want to target:
var mess = iframe.contentWindow.document.getElementById("mess").value += `${nick}, `;
}

So first get the iframe element by id, then target the element within the iframe..
so if input.php has an <h1></h1> tag this will set the innerHTML to what the parameter nick holds..
function addNick(nick) {
var iframe = document.getElementById('iframe');
//the element you want to target:
var mess = iframe.contentWindow.document.getElementsByTagName("H1")[0];
mess.innerHTML = `to ${nick}`
}
On how to access dom of iframe, check out this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_element_iframe

Related

How to change href value using javascript?

I have a wordpress site and theme that is providing me an ability to change elements in menu widget on all pages it appears only.
So, what I want to do is to change links and names of menu elements locally on one page. I have an id's for menu li elements, 'menu-item-7062' for example and a href tag inside it with already defined link and text values.
I have already tried and injected this code snippets in after all post content:
<script type='text/javascript'> document.getElementById('menu-item-7062').href = 'new link'; </script>
I have also created a function that is triggers after onclick event:
<script type="text/javascript">
document.getElementById("menu-item-7062").onclick = function() {
document.getElementById("menu-item-7062").href="my new link";
};
</script>
Unfortunately, they didn't affect my old link. Returning to my question, what are other solutions I could try in order to change both a href link and text value? What possible mistakes I have made?
UPDATED:
Here is my anchor tag
Автоматизация технологических процессов
A tag located under the <li id="menu-item-7062">, there is my mistake.
Did you try setAttribute function
document.getElementById("menu-item-7062").setAttribute("href", "my new link");
I have successfully affected a tag by query selector:
<script type="text/javascript">
var tag = document.querySelector('a[href="https://test.etm.io/ru/services/automation/"]');
if(tag){
tag.innerHTML = "new";
}
</script>
you should try this..
var a = document.getElementsByTagName("a");
a[0].href = "www.abc.com/";
if you doesn't know index of a then you should get id of a and then set link.
This will help you to check and set href for tag "a" without "id":
const parent = document.getElementById("menu-item-7062");
if(parent.firstElementChild.localName === 'a') {
const child = parent.firstElementChild;
child.href = 'my new link';
}
OR
const parent = document.getElementById("menu-item-7062");
parent.firstElementChild?.href = 'my new link';

How do I get the <title> from a child iframe to set on the index.html

Currently I have the following in my index.html file
document.title = document.getElementById('title').contentWindow.document.title;
But it makes the title blank instead of the title of the iframe.
How do I fix this?
Here is my site
Getting the title of an iframe is as easy as:
var iframe = document.getElementById("iframeId");
var iframeTitle = iframe.contentDocument.title;
If you want to get the value of title when the iframe is loaded, execute:
document.getElementById("iframeId").onload = function() {
var iframeTitle = document.getElementById("iframeId").contentDocument.title;
}
The title value is now stored in your iframeTitle variable.
Afterwards, you can replace you title value on your current page with this variable.
if (document.title != iframeTitle) {
document.title = iframeTitle;
}
If you want to insert this code to your html file, add the following code after your content in your <body> element.
<script>
document.getElementById("iframeId").onload = function() {
var iframeTitle = document.getElementById("iframeId").contentDocument.title;
if (document.title != iframeTitle) {
document.title = iframeTitle;
}
}
</script>

How to get anchor text in a Session variable?

I am working on a project in which i have linked many pdf files in the master page.On clicking the anchor the page redirected to the specified page and displays pdf in iframe.Now i want the text in anchor tag to be displayed on the page where pdf is opened.
Consider I have an anchor which looks like this :
News Letter
Now i want the text " News letter" to be shown on the redirected page.
I think i could this by saving the text in session variable.But How can I save the anchor text in Session variable without specifying any id or class to the anchor tag? Can anyone help me please ?
You probably looking for QueryString instead of session, You are already passing path in QueryString, also pass the anchor text. You need to add this to url while you are creating the anchor tag.
News Letter
On server side
lblForAnchor.Text = Request.QueryString["aText"].ToString();
Edit you can not change the query string when it is created then you can change it when it is loaded in DOM in document.ready. Assign a class to your anchors to be specific.
$( 'a.someclass' ).attr( 'href', function(index, value) {
return value + '&aText=' + $(this).text();
});
Other way to do this on click of anchor.
$( 'a.someclass' ),click(function(event) {
window.location.href = this.href + '&aText=' + $(this).text();
});
You can try this
$("a").click(function (e) {
if($(this).attr("href").match(".pdf$"))
{
window.location.href = $(this).attr("href") + "&title=" + $(this).text();
e.preventDefault();
}
});
On server side in "Main_Content.aspx"
strTitle = Request.QueryString["title"];
You could Write the content dynamically with javascript:
News Letter
Javascript:
<script language="javascript">
function openWin(t,u) {
docstring='<iframe src='+u+'></iframe>';
win = window.open();
newdoc=win.document;
newdoc.writeln(t);
newdoc.write(docstring);
newdoc.close();
}
var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function () {
var theAnchor = elements[i].innerHTML;
var theHref = elements[i].href;
if(theHref.match(/\.pdf/)){
openWin(theAnchor,theHref);
}
}
</script>
Or call a different address with URL and test as parameters and generate the doc on the server side.
I'm not sure how this will behave with the link click but it might be worth a shot.
links should not have to be modified.

I am trying to create an iframe that changes when a button is clicked

I am setting up a website and what I need is for when a button is clicked it changes the link in the iframe so it goes to another website. Here is what I got so far:
<script>
var id = 'http://www.aWebsite.com';
function link(){
id = 'http://www.aSecondWebsite.com'
}
</script>
<script>
document.writeln('<iframe name="heel"src="' + id + '" height="300" width="700"> </iframe>');
</script>
<button onclick="link()">Click Me</button>
I am not sure why when the button is clicked the id variable isn't changed?
Actually the value of id is changed, but document.writeln() is not in the link function, hence it's not executed.
A quick-fix would be to move the document.writeln() into link(), but that would be a disastrous fix. document.write(ln)() wipes out everything in the document, and creates a new one, when used after the page has been parsed. You need to do something like this:
function link() {
id = 'http://www.example.org';
document.getElementById('heel').src = id;
}
Then add your iframe element to a HTML, and remove the whole script with document.writeln().
<iframe id="heel" name="heel" src="http://www.example.com" height="300" width="700"></iframe>
EDIT
If you want to create a new iframe element, you can do it like this:
function link() {
var frame = document.createElement('iframe'); // creates an iframe element
id = 'http://www.example.org';
frame.width = '700px'; // sets the width for the new iframe
frame.height = '300px'; // sets the height for the new iframe
frame.name = 'heel2'; // sets the name for the new iframe
frame.src = id; // sets the src for the new iframe
document.body.appendChild(frame); // appends the new iframe to body as a last element
}

How can I link to an anchor tag that doesn't exist until the Javascript has created it?

I have a page that has a set of <div> elements, and each one has an anchor tag associated with it. It looks something like this:
<a name="anchor-0"></a>
<div id="div0">Some stuff</div>
<a name="anchor-1"></a>
<div id="div1">More stuff</div>
<a name="anchor-2"></a>
<div id="div2">Yet more stuff</div>
The problem is that this set of <div> and <a> tags are generated by Javascript, and so they don't exist until after the page has been created. When I create a link like this:
http://www.mywebsite.com/mypage.html#anchor-2
... it loads the page but does not jump to the anchor-2 position, which is only created some time after the browser has had time to execute the Javascript that generated it.
How can I get the browser to move to the selected anchor tag position once the Javascript has generated them?
Here is essentially what the Javascript that is generating the HTML looks like:
function init() {
gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
gapi.client.load('blogger', 'v2', function() {
var request = gapi.client.blogger.posts.list({
'blogId': 'xxxxxxxxxxxxxxxxxxxxxxxx',
'fields': 'items(content,title)'
});
request.execute(function(response) {
var main = document.getElementById("main");
var anchor = 0;
for (var i = 0; i < response.items.length; i++)
{
var Div = document.createElement("div")
$(Div).append(response.items[i].title);
$(main).append(Div);
anchor = document.createElement("a");
anchor.name = "anchor-" + anchor;
anchor = anchor +1;
}
});
});
}
after creation of element, you could do:
location.hash = "#anchor-2";
or using scrollIntoView
element = document.getElementById('your_element-id');
element.scrollIntoView();
get the hash value from url, by doing something like::
var hashVal = window.location.hash.substr(1);
//then jump to that hash
location.hash = "#" + hashVal;

Categories

Resources