I have a iframe that opens different page depending upon the items selected in a menu. Each page in a iframe contains div elements and tables.
My requirement is to set focus on the first div or table in a iframe. Therefore I am looking for a way to access id of first div or first table and set focus on it.
Since pages loaded in a iframe are depended upon the menu items selected, I couldnot use getElementById method to access elements inside iframe.
I have tried to access first div element in a iframe using following code :
var innerElement = iframeObject.contentWindow.document.getElementsbyTagName('div')[0];
innerElement.focus();
But , innerElement is regarded as undefined.
However I was able to set focus on iframe using :
iframeObject.contentWindow.focus();
but could not set focus on inner div.
Can anyone help, how could i access the first elements of a iframe?
If you're trying to reach out a specific HTML element from an external source (URL out of your domain), you can't do that forsake of DOM security reasons!!
Related
For a requirement, I have a iframe in my html page like this
<iframe src="www.abc.com" id="firstembed" name="iframebox"></iframe>
So, the given URL (www.abc.com) will get loaded in the iframe. Now, my requirement is, if user click on the area of iframe(for ex: image or dropdown etc), I need to display the alert message containing name, id or text etc.
Please advice me how we can detect the click event on iframe element using JQuery.
I have a page with multiple iframes, at a time one one iframe is active, and i would like to know which iframe is active currently.
I tried document.activeElement.id, but it gives correct result only when I click on page some where.
I tried this also but not giving me active iframe id.
Do you know any javascript/jquery api to know active iframe id.
Using jQuery you can try this:
var $focused = $(':focus');
The above will get the element that currently has focus.
I am new to SharePoint and need some assistance. I have a webpage written in normal HTML and JavaScript with an IFRAME that contains a SharePoint page. When the webpage loads, it contains the user's name in a hidden field. I am trying to make it so when a person clicks a button on the webpage it sets the People Picker to the text input's value from my webpage (the user's name). I tried to pull the ID of the textarea element of the SharePoint People Picker in the IFRAME and use normal j Query to set the value of the textarea of the People Picker, but it doesn't work. Any ideas? I am trying to input it on NewForm.aspx.
In the Webpage, I have a hidden input with the id 'hiddenUser' that pulls the SharePoint user's name in this format = 'Jackson, Joseph'. That works fine; although, I am not sure if that is the best way to do it. Assuming the hiddenUser input has a value, this is what I was using to try and set the People Picker:
var userPosting = $('#hiddenUser').val();
$('#newForm').contents().find('#ctl00_m_g_ffa4fb44_5605_472f_b10f_ba47d0267de5_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox').text(userPosting);
'newForm' is the ID of the IFRAME on my webpage. I also tried .val instead of .text and it didn't work. Any suggestions? There are multiple People Pickers on the SharePoint form.
It's possible for an embedded page in an iframe to talk to the containing parent page, but the parent page can't talk to the child unless the child explicitly allows it. JavaScript in the embedded page can refer to a parent object.
Check out this similar answer:
There is a way. When the page in the iframe loads, have it do the following
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following
function childLoaded() {var dom = childGetElementById('someid');}
This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.
I have a quicklaunch (bookmark list if you'd like) which will send the user to different pages with lots of text. So I want them to be sent to the specific paragraph.
Is it possible to make a page autoscroll to a specific DIV onload and how?
I'll live without the animation. If it can just go to it directly that'll make my day. Like when you have an <a href="#SomeId"> tag and when you click that anchor it sends you to that div.
Edit: If the user bookmarks the top paragraph, an ID isn't saved for the link. So in that case I just want it to go to the where the content div starts. How is this possible?
Try this:
window.location.hash = "myDiv";
This will change the hash to myDiv (and scroll to the element whose id attribute is equal to the hash).
Example.
I have a parent page containing two iframes. One holds navigation links and the other should display the information pertaining to the navigation link clicked in the first iframe. So I need to target the one iframe from within another iframe.Is this possible? If so how does one go about it?
I figured it out. For those who want to know, you need to use javascript to access the parent document elements and change the attributes. So to answer my own question, one sets the onclick link to run the following javascript:
parent.document.getElementById('frameName').src = 'page.html';