Develop Reference

OneNote JavaScript API access element

I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal

Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.

Get contents from second iframe

At the moment I can retrieve the contents of the first iframe on a web page that is not mine with $('iframe').contents()
From this I can get the body tag by doing $('iframe').contents().find('body'). The results are what is expected
However, I an trying to get the body tag of the second iframe. By doing `$('iframe').eq(1) I can get the second iframe, but $('iframe').eq(1).contents() gets nothing.
How can I get the contents of the second iframe?

A lot of the Fiddles and such may not be a good test place. There are complications with CORS. Here is an example that works:
https://jsfiddle.net/Twisty/037yueqj/9/
HTML
<iframe id="frame-1"></iframe>
<iframe id="frame-2"></iframe>
JavaScript
$(function() {
var f1 = $("#frame-1"),
f2 = $("#frame-2"),
frames = $("iframe");
f1.contents().find("body").html("<strong>Frame 1</strong>");
f2.contents().find("body").html("<strong>Frame 2</strong>");
console.log(frames.eq(0).contents().find("body").text());
console.log(frames.eq(1).contents().find("body").text());
});
If you give them unique IDs or classes, you can just call on the proper selector. You can call on a wider selector and use .eq() or iterate with .each().

Had to use --disable-web-security in chromium to access contents in an iframe from another url

Same iframe in two places on the page?

I have a strange problem.
I've created an iframe on the page and now want to put it inside of two different holders:
var iFrame = $('[data-id="loginWindowIframe"]');
//put the iframe in first holder
$('#loginWindow').html(iFrame);
//put the iframe to the second holder
$('[data-id="loginWindow"]').html(iFrame);
The problem is that iframe is being completely removed from the first holder, when I add it to the second one. Seems like I can have only one instance of iframe with same attributes on the page...
What am I doing wrong?

You're just moving it around. Clone it
var $iFrame = $('[data-id="loginWindowIframe"]');
//put the iframe in first holder
$('#loginWindow').empty().append($iFrame);
//put a clone of the iframe to the second holder
$('[data-id="loginWindow"]').empty().append($iFrame.clone());
Please note I've used $iFrame instead of iFrame. This is purely for readability - it signifies it holds a jQuery object.

Dynamically generating iframes causing previously generated iframes to refresh unwontedly - when using innerHTML

Thanks in advance for any help.
I am posting form values to multiple dynamically generated iframes, and want the content of each iframe to remain, as I post to another dynamically generated iframe.
As you can see by my example - even just dynamically creating and adding a new iframe via innerHTML +=, causes the previously generated iframes to refresh.
This is not the case if I do not use javascript to create the iframes - if I just write the html ahead of time and post to the already existing iframes, there is not any refresh problem. The previously posted iframes will remain with the posted content.
I do not know how many iframes I will need - so that is why I am using javascript to dynamically generate the iframes.
I am aware that I could use AJAX for this same purpose, but I am not using AJAX for this.
I just need to know why the iframes are refreshing, regardless of there content, when I am dynamically adding another iframe via Javascript and innerHTML?
Is there a way to achieve this without the iframes refreshing?
With my example - I am only showing that the iframes are refreshing. I am not posting to them. But the problem shows up the same.
Click the "Add Iframe" button, up to 3 times. note the previous iframe(s) refreshing as the new one is added.
Here is my example code of this problem.
Thanks again.
<script type="text/javascript">
var Content_For_Iframe_Array = new Array("http://www.bing.com", "http://www.wordpress.com/", "http://www.webcrawler.com");
var Inc_iFrame_Num = 0;
function add_iframe_with_content(){
if(Inc_iFrame_Num < 3){
var iFrame_String ="<iframe frameborder='5' src='"+Content_For_Iframe_Array[Inc_iFrame_Num]+"' scrolling ='yes' id='iFrame_"+Inc_iFrame_Num+"' style='height:300px; width:800px; margin:5px; padding:0px;'></iframe>";
document.getElementById('iFrame_Container').innerHTML += iFrame_String;
Inc_iFrame_Num++;
}
}
</script>
<div style="cursor:pointer; background-color:#CCC; border:thin #7777 solid; width:85px; margin-top:40px; margin-bottom:14px;" onclick="add_iframe_with_content();">Add Iframe</div>
<div id="iFrame_Container" style="height:300px; width:800px; border:#CCC thin solid;">Div to hold Iframes</div>

Since you solved it, here is why it happened. The iframes technically didn't refresh, they were destroyed and then recreated.
When you set innerHTML, you remove all the existing nodes inside an element, and then generate new nodes based on the HTML snippet you inserted. Try the following experiment.
<div id="el"><button>My Button</button></div>
<script>
var myElement = document.getElementById('el');
var button = myElement.firstChild;
myElement.innerHTML = myElement.innerHTML;
console.log(button);
console.log(myElement.firstChild);
console.log(button == myElement.firstChild);
console.log(button.parentNode);
</script>
Here, you see we have a <div> holding a <button>. We store the button as a variable and then "reload" the inner HTML. In the first two lines of the log the elements look the same, but they are actually two different nodes. This is evidenced by the fact that line 3 returns false, showing they are different and line 4 shows that button doesn't have a parent node. It is just sitting in memory because we have a reference to it.
As you discovered, the non-destructive way to change an element's children is with DOM methods. You can use appendChild to add an element at the end or insertBefore to insert a child at a different position. Newer browsers support a method called insertAdjacentHTML which does what you were originally planning, create HTML from a string and non-destructively insert it at the end of a node. I don't think support is quite there yet, though, and the other DOM methods are much more well understood.

I think I found the answer.
The proper method is to use createElement() and appendChild(). (See code below)
But I would still love to know why the innerHTML method refreshes the other iframes?
Here is the correct usage for my example:
// PROPER METHOD to place the new iframe
var iframe = document.createElement('iframe');
iframe.frameBorder = 5;
iframe.scrolling ='yes';
iframe.height = "300px";
iframe.width = "800px";
iframe.name = "iFrame_"+Inc_iFrame_Num;
document.getElementById("iFrame_Container").appendChild(iframe);
//

javascript multiple forms on the same rendered screen

I'm working with classic ASP.
I have an 2 includes that have 2 different forms on them. They are both unique in name. However, when I try to read the value of the one the elements in the 2nd form I get an error saying it is null. However, when I view the source in Firebug I can see that in face there is a value in that element.
My javascript code:
console.log(document.getElementById('focusValue').value);
Output from firebug:
<input id="focusValue" type="hidden" value="1006" name="focusValue">
Is there something I need to do because there are 2 forms on this "rendered" screen? The only other thing I think I should mention is that these pages are in an iFrame. Not sure if that really matters...

An iFrame creates a separate document within the containing document, you need to get a reference to that document before you can access its content. There is a reasonable tutorial at http://www.dyn-web.com/tutorials/iframes/.
If you only have one iFrame in the page, then you can reference it by:
var frame = window.frames[0];
Or you could use an id with getElementById. To get a reference to the document:
var doc;
if (frame) {
doc = frame.contentDocument || frame.contentWindow.document;
}
Now you can get to the input element:
var input = doc && doc.getElementById('focusValue');
Of course this all depends on you complying with the same origin policy, otherwise you can't access the frame content.

Can't see your page, so it's hard to debug. Assuming the script runs AFTER the forms. The only thing i can think is that there is more than one element on the page with the id "focusValue".
What happens when you console.log(document.getElementById('focusValue'))