title: How Do I Set Value of Elements in iframe?
body: <p>I need to set the <code>value</code> attribute of several elements in the document of an iframe.  I am able to easily do this from Chrome Tools Console.  But the same commands do NOT work from a JavaScript injected into the page by Keyboard Maestro or AppleScript.</p>
  
  <p>The iframe is generated by a Chrome extension:  Evernote Web Clipper.
  In the below examples, I have already invoked the Evernote Web Clipper.</p>
  
  <p><a href="https://i.stack.imgur.com/Vgl5A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vgl5A.png" alt="enter image description here"></a></p>
  
  <p>This script/commands work from Chrome Console, after I have selected the iframe document:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var remElem = document.getElementById("comments");
  remElem.value = "KM This is a test";
  var titleElem = document.getElementById("title")
  titleElem.value = 'KMTEST title'</code></pre>
  </div>
  </div>
  </p>
  
  <p>I suspect that I first need to get or select the iframe document before I run the above script.  How do I do this?</p>
  
  <p>I have tried many different SO solutions, and none of them work.</p>
  
  <p>Here is a screenshot of the main document in Chrome Tools:</p>
  
  <p><a href="https://i.stack.imgur.com/rU7ce.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rU7ce.png" alt="Main Document in Chrome Tools"></a></p>
  
  <p>Screenshot of iframe document in Chrome Tools:</p>
  
  <p><a href="https://i.stack.imgur.com/5vf41.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5vf41.png" alt="enter image description here"></a></p>
  
  <p>Here is what I have tried, unsuccessfully:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// *** NONE of These Work ***
  
  //--- Method 1 ---
  var frame = window.frames[‘frame1’];
  var documentObj = frame.document;
  var element = documentObj.getElementsByName(‘frame1Text’); 
  
  //--- Method 2 ---
  var frame = document.getElementById(‘myframe1’);
  var documentObj = frame.contentWindow.document;
  var element = documentObj.getElementById(‘frame1Text’);
  
  //--- Method 3 ---
  window.frames[1].document.getElementById('someElementId')</code></pre>
  </div>
  </div>
  </p>
  
  <p>For example, from Chrome Tools, when I have the main document selected:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//--- From Chrome Tools with Main document selected ---
  
  enFrm = document.getElementById("evernoteGlobalTools")
  /*RESULTS
  &lt;iframe id=​"evernoteGlobalTools" src=​"chrome-extension:​/​/​pioclpoplcdbaefihamjohnefbikjilc/​content/​global_tools/​global_tools.html" class=​"evernoteClipperVisible" style=​"height:​ 528px !important;​"&gt;​&lt;/iframe&gt;​
  */
  
  oDoc = enFrm.contentWindow.document;
  /* ERROR
  VM882:1 Uncaught DOMException: Blocked a frame with origin "http://forum.latenightsw.com" from accessing a cross-origin frame.
      at &lt;anonymous&gt;:1:27
  (anonymous) @ VM882:1
  */
  
  oDoc = enFrm.contentWindow.document;
  
  /* ERROR
  VM892:1 Uncaught DOMException: Blocked a frame with origin "http://forum.latenightsw.com" from accessing a cross-origin frame.
      at &lt;anonymous&gt;:1:27
  */</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any/All suggestions/ideas gratefully accepted.</p>