$.fancybox({
type: 'iframe',
href: url,
afterShow: function() {
var name = parent.$('#pname').val();
$('#fname').val(name);
$('#fname').focus();
return true;
},
beforeClose: function(){
clsCarr();
},
Where pname is an input box in the parent document and fname is an input box in the fancybox document. How to I put the value of pname in to fname? afterShow knows the value of pname, but is not putting it in fname.
I just saw that this is an iframe in the fancybox. It's always interesting trying to get iframes to "talk" with their parent document, so I'm not positive I've got this 100% right. :)
var name = parent.getElementById("lst-ib").value;
document.querySelector("#fancybox-content iframe").contentDocument.getElementById("fname").value = name;
My thought behind this is that probably your $.fancybox is running in your parent document, and when you use parent.$('#pname').val() it would be equivalent to running $('#pname').val(), since parent will not be able to be any 'higher' than the root document.
Thus, if my theory is correct, you will need to get the iframe and access its contentDocument (or perhaps just document), and fetch the ID of the element inside the iframe.
This would, obviously, only work if the iframe is using the same domain as your parent document. I believe browsers implement some sort of cross-domain verification nowadays.
Related
I'm kind of new to Polymer and i'm having an issue lately. I create dynamically a certain amount of instances of a web-component of mine, and I'd like to be able to call a method on these instances from my parent-component but I can't figure out how to do it even with answers I found online.
Here's my parent method where I try to call the children method (the e.detail.id match the id of the specific instance of my children I'm trying to reach) :
childObj: function(e) {
var name = "selectObj"+e.detail.id;
this.$.name.hello();
},
And my child basic method :
hello: function() {
console.log("hello");
}
The ID that name gets exists well but still i get this error
TypeError: Polymer.dom(...).querySelector(...) is null
I also tried replacing this.$.name.hello() by this.$$('#selectObj'+e.detail.id) but still I get the same error.
Here's how I create my childrens elements :
newObj: function() {
var dynamicSelect = document.createElement("pbd-object-select");
dynamicSelect.num = this.nbObj;
var newId = "selectObj" + this.nbObj;
dynamicSelect.id = newId;
Polymer.dom(this.root).querySelector("#listeObjet").appendChild(dynamicSelect);
},
There are two issues with they way you are trying to query for that element. One of them is that by doing this:
this.$.name.hello();
You are basically looking for an element with the id "name", not one with the id equal to what you have in the variable name. Something like:
this.$[name].hello();
might work better in general, but it would still have some problems in your particular case. this.$ is just a "shortcut" to get elements by ID in an easy manner, but, it's just an object in which references to the elements that exist and have ids when the element is connected. Because of that it doesn't work with elements that are conditionally included (in dom-ifs for example), or that are dynamically generated, like in your case.
You can just use the getElementById method, like you would do in vanilla JS, just keeping in mind that you are querying in your element and not in document. So it would be something like:
this.shadowRoot.getElementById("selectObj"+e.detail.id).hello()
Same-page links work by referencing another element that has id="sec-id" on the same page, using
for instance. A link like this is relative.
However, if I use that very same syntax in the iframe in my LaTeX.js playground, it will not just scroll to the destination element, but (re)load the whole playground page inside the ifame. (Note that I set the contents of the iframe programmatically with iframe.srcdoc = html)
Example: LaTeX.js playground, right at the end of the first section click on the link in "See also Section 11." in the iframe on the right side.
What could be the reason?
UPDATE: I now understand the source of the problem: the browser uses the document's base URL to make all relative URLs absolute (see <base>). The trouble starts with an iframe that has its content set with srcdoc: no unique base URL is specified, and in that case the base URL of the parent frame/document is used--the playground in my case (see the HTML Standard).
Therefore, the question becomes: is there a way to reference the srcdoc iframe in a base URL? or is it possible to make the browser not prepend the base? or to make a base URL that doesn't change the relative #sec-id URLs?
I don't know exactly how you could resolve this, I think it is because the srcdoc, you can't use the src with the content-type because the character limit, but you can convert it to a Blob and it kinda works, the style are lost though. Maybe you can use it as a starting point, based on your page:
// Get the document content
const doc = document.querySelector('iframe').srcdoc;
// Convert it to blob
const blob = new Blob([doc], {type : 'text/html'});
// Load the blob on the src attr
document.querySelector('iframe').src = URL.createObjectURL(blob);
// Remove srcdoc to allow src
document.querySelector('iframe').removeAttribute('srcdoc');
What about catching the event and scrolling to the desired anchor?
$("a").click(function(e) {
$('.iframe').animate({
scrollTop: $(e.target.attr('href')).offset().top
}, 2000);
return false;
});
For the record, it seems that my question is not possible, i.e., it is not possible to use relative same-page links in an iframe that has its content set using srcdoc. A workaround has to be used, see the other answer.
I have an iframe and in order to access parent element I implemented following code:
window.parent.document.getElementById('parentPrice').innerHTML
How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?
To find in the parent of the iFrame use:
$('#parentPrice', window.parent.document).html();
The second parameter for the $() wrapper is the context in which to search. This defaults to document.
how to access iFrame parent page using jquery
window.parent.document.
jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.
If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:
window.parent.$
window.parent.jQuery
Example:
window.parent.$.modal.close();
jQuery gets attached to the window object and that's what window.parent is.
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
in parent window put :
<script>
function ifDoneChildFrame(val)
{
$('#parentPrice').html(val);
}
</script>
and in iframe src file put :
<script>window.parent.ifDoneChildFrame('Your value here');</script>
yeah it works for me as well.
Note : we need to use window.parent.document
$("button", window.parent.document).click(function()
{
alert("Functionality defined by def");
});
It's working for me with little twist.
In my case I have to populate value from POPUP JS to PARENT WINDOW form.
So I have used $('#ee_id',window.opener.document).val(eeID);
Excellent!!!
Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.
There are multiple ways to do these.
I) Get main parent directly.
for exa. i want to replace my child page to iframe then
var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);
here top.location gets parent directly.
II) get parent one by one,
var element = $('.iframe:visible', window.parent.document);
here if you have more then one iframe, then specify active or visible one.
you also can do like these for getting further parents,
var masterParent = element.parent().parent().parent()
III) get parent by Identifier.
var myWindow = window.top.$("#Identifier")
I have a bit different task to do,
first, i have add an iframe tag dynamically, which i was able to do easily using the code->
function getFrame()
{
var iframeTA = document.createElement("IFRAME");
iframeTA.setAttribute("src", "iframeTakeAction.html");
iframeTA.style.width = "200px";
iframeTA.style.height = "200px";
document.getElementById("status").appendChild(iframeTA);
}
now, want i want to do is to access the elements of iframeTA (i.e. elements within the body tag of 'iframeTakeAction.html' which is the source of iframeTA),
something like this ->
iframeTA.body.getSomeElement......
Hope this kind of operation is possible, if so please put some light.
Thanks.
You should be able to access it with:
document.getElementById("TOUR IFRAME ID")
However, this only holds as long as your iframe src is a relative path on the same domain. If you change the domain then your browser will prevent you to do this.
How to resize an external site to fit into an iframe in my website?
Please any one help me?
)
You cant interact with an external iframe if it is in a different domain. If it is in the same domain, you can resize its contents as follows:
/**
* this function allows you to retrieve the window object of an iframe given by its ID
*
* #param {string} id - iframe id
*/
var getIframe = function (id) {
if ($.browser.mozilla) return document.getElementById(id).contentWindow;
return window.frames[id];
};
then, from the external file (the one which contains the iframe), you can call something like this when the iframe is loaded:
var resizeIframeContent = function(iframeID, sizeX, sizeY){
var iframe = getIframe(iframeID);
iframe.updateSize(sizeX, sizeY);
}
With this code, you are calling the function updateSize in the inner document of the iframe, so you should add this function in the nested document attached to the window object (global namespace). Something like this:
var updateSize= function(sizeX, sizeY){
//do you resizing stuff here, which depends on your html structure, it could be something like this:
$("#content").width(sizeX).height(sizeY);
}
However, I think that you question is wrong, and you are actually trying to ask how can you modify the size of your iframe (not the iframe content) to fit its inner content. If so, you cant do it in a crossdomain situation, but if both pages are in teh same domain you can do it in a similar way, something like this:
On your inner document, when the document is ready, send its size to the parent container:
$(function(){
var content = $("#content"); //change this to point your container, or obtain the document height or anything else
parent.onIframeDimensionsRetrieved( content.width(), content.width() );
});
and in your outter document (the one with the iframe) retrieve the new size and update the iframe dimensions:
var onIframeDimensionsRetrieved = function(width ,height){
$("#youriframe").width(width).height(height);
}
That is all :-) All my sample code was using jQuery to make it readable, you can do it with pure JS too if you want to.
Good luck! i hope it helps :-)