Let's say I have a page with an iframe and within the iframe I have some ckeditor inline instances that I want to manage from the containing page.
From the parent, if I run
console.log(document.getElementById("iframe_id").contentWindow.CKEDITOR);
I have the CKEDITOR object, but don't know why, if I run
console.log(document.getElementById("iframe_id").contentWindow.CKEDITOR.instances);
i get an "undefined" result.
Any idea?
POST EDIT: if I run the last console.log directly in the inspector I get all the instances as normal, the problem seems to exist only in the parent page js.
Related
I am opening HTML webresource using Xrm.Navigation.openWebResource but on closing of HTML window I want to pass values from HTML to javascript file from where it is opened. Is there call back function can be implemented?
If I open HTML window using window.open I can call parent javascript function using window.opener.functionname on close but click but I want to know how I can pass values to parent javascript file on close button click of HTML window.
I tried with window.parent.opener.Functionname() but it is not working - getting functionname is undefined but it is defined in parent javascript. Pls suggest.
If you're using the 'old' (as it not the unified interface) user interface with turboforms enabled then the parents javascript is actually in a extra iframe called customScriptFrame, and not on the parent itself.
To call something on the parent you can use
parent.customScriptsFrame.functionname() for IE
and
parent.customScriptsFrame.contentWindow.functionname() on chrome.
On the unified interface its much the same, but far more troublesome.
Now the scripts are in a iframe called ClientApiFrame_[n] where [n] is some random number. And i haven't found a good way to determin that number ahead of time from a webresource.
You could go over all frames of the parent in javascript (parent.frames) to find one that has a id that starts with ClientApiFrame_ but that will throw errors trying to read frames with sources set to external domains, and i dont think is very good practice.
Another possibility is registering the function you want to call with the parent ahead of time. so in the main javascript use this.
parent.functionname = functionname
And then from the webResource you can use the normal
parent.functionname
If the webresource is embedded in the form, then use window.parent
If you Xrm.Navigation.openWebResource to open it, then use window.opener
I'm building a chrome extension where I have to access the innerText of some span elements. I can safely get them using simple document.querySelector commands.
But for some spans, it returns null because they don't exist yet in the DOM> (For security reasons, I cannot disclose which website this happens with but to make it more clear, LinkedIn does a similar thing where the Experience block is only loaded if you scroll down to it.)
Now, to quote the problem using that example: I want to get the value of a span which is inside that Experience section. If I run the script inside window.onload, it returns null because the span isn't there yet.
One solution is to simply scroll the page, (or even worse, ask the users of the extension to first scroll the page before running the extension.) However, I do not want to do that.
Is there a way in JS to scroll the page in the background without visual feedback to the user so that I can get the value of the HTML elements that are initially hidden?
Assume that the span I want to get has the following class: defense-rc4
I would like to be able to save the state of the html page after I've interacted with it.
Say I click a checkbox, or the javascript set the values of various elements.
How can I save the "javascript-rendered" page?
Thanks.
In Chrome (and apparently Firefox), there is a special copy() method that will copy the rendered content to the clipboard. Then you can do whatever you want by pasting it to your preferred text editor.
https://developers.google.com/chrome-developer-tools/docs/commandline-api#copyobject
Console Example:
copy(document.body.innerHTML);
Note: I noticed Chrome reports undefined after the method is run, however, it seems to execute correctly and the right content is in the clipboard.
That should do and will grab the ALL page not just the body
console.log(document.getElementsByTagName('html')[0].innerHTML);
document.body.innerHTML will get you the HTML representation of the current document body.
That will not necessarily include all internal state of DOM objects because the HTML contains the initial default state of objects, not necessarily the state that they may have been changed to. The only way to guarantee you get all that state is to make a list of what state you want to save and actually programmatically get that state.
To answer the part of your question about saving it, you'll have to describe more about what problem you're really trying to solve.
To get the equivalent of view source with javascript rendered, including doctype and html tags, copy the command into the chrome console:
console.log(new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML);
In the chrome console, hover at the end of the output and click on the copy link to copy to the pasteboard.
I've got a list of data in an observableArray and I want to show it in a javascript dialog window (I'm using jQuery.blockUI if it matters). Unfortunately the dialog seems to come unbound after the page is loaded. The dialog initializes correctly (the data is displayed), but it isn't updating with changes.
There are no Javascript errors and I've moved the binding to after the dialog is generated and added to the document (no effect). I've also tried calling ko.applyBinding on the main div that makes up the dialog but that, for some reason, causes part of the main page to hide (the DOM is there, but they are hidden).
EDIT: I've created a project on jsfiddle that reproduces the problem. The main culprit seems to be wrapping the content of the dialog in a div. If I show the content directly it seems to work (of course I can't do that, the wrappers provide a common style for our dialogs).
I'm recovering from the flu and could easily be missing something obvious, but I've been trying all day and nothing is coming to me. Any ideas?
The problem is that the dialog does not exist in the DOM (despite your calling $(document).append(). You cannot append a div as a child of the document itself). Instead, append the dialog to the body and hide it.
$dlg = $('<div></div>').hide();
$('body').append($dlg);
Works here: http://jsfiddle.net/yL6ds/4/
I orginally asked this question and at the time I was grasping at straws. I created the following fiddle that is closely related to what I'm actually seeing on my internal application:
http://jsfiddle.net/uwtj9/10/
There is a normal index.asp page. On that page I can open a div that includes an iFrame (so a popup). Then from that iFrame I can then open another div that includes another iFrame. However, when the second div opens I am trying to close the 1st div. Hopefully that makes sense.
However, when I try to open the second div, the code to create the iframe never gets run. I think it has to do with the "top." that is currently in my internal application code. When I try to add top.hidepopwin I get an error in Firebug:
Permission denied to access property 'hidePopWin'
However, in my code internally I don't get that error message, but I don't get into the doPopWin code.
Unfortunately for whatever reason when I take out the top. in my code internally it doesn't quite work the way I'm expecting (and I can't replicate it on the fiddle). Basically the second div gets created but it remains the same size and not all the elements are getting cleared (i.e the original menu is still showing up under the new menu).
Anyone have any idea's on this? The fiddle seems to be working as I expect but this "top." thing is kind of weird.
UPDATE:
SLaks answer of why the "top." doesn't work for jsFiddle is acceptable. I'm still left wondering about this issue:
Unfortunately for whatever reason when I take out the top. in my code internally it doesn't quite work the way I'm expecting (and I can't replicate it on the fiddle). Basically the second div gets created but it remains the same size and not all the elements are getting cleared (i.e the original menu is still showing up under the new menu).
Any ideas?
top returns the window object for the outermost frame hosting your page.
In jsFiddle, that's the root jsfiddle.com page, which is in a different domain than your user code. (user submissions in jsFiddle run in http://fiddle.jshell.net)