i want to use jquery library in a child iframe. Parent window has included jquery library.
This is the script that included in iframe
$p=parent.window.$;
$p(document).ready(function (){
console.log($p('#bla').val());
console.log($p('#searchedCity').val());
}
);
$p('#bla').val() - this I'm trying to get value of input text field that is located in iframe. Now it returns undefined
$p('#searchedCity').val() - this is value of input text field from parent window. and it returns the right value
when I'm including jquery library directly to the iframe - $('#bla').val() works fine.
what am I missing? Can you help me?
that is because your searching for elements $p('#bla') #bla in parent container. which is not present there..load jquery in current iframe and use $..
$p=parent.window.$;
$p(document).ready(function (){
console.log($('#bla').val());
console.log($p('#searchedCity').val());
}
);
and yes you are calling these function when parent's document is ready which may not work as it should..
$(document).ready(function (){
console.log($('#bla').val());
$p=parent.window.$;
console.log($p('#searchedCity').val());
}
);
I don't know if it does the same but try this :
console.log($('#bla', p).val());
console.log($('#searchedCity', p).val());
Try this:
$p=parent.window.$;
$p(document).ready(function (){
console.log($('#bla').val());
console.log($p('#searchedCity').val());
}
);
Related
I created an iframe with content dynamically loaded with jquery like this and I want the iframe document to access its content as soon as it has been loaded:
jQuery('<iframe>', {
id: 'widgetFrm',
width: '100%'
})
.appendTo('#widgetDiv')
.on('load', function () {
jQuery(this).contents().find('body').append(data.html);
})
The frame document knows about jquery because I use
if (typeof(jQuery) == "undefined") {
var iframeBody = document.getElementsByTagName("body")[0];
var jQuery = function (selector) { return parent.jQuery(selector, iframeBody);
}
there. Within the iframe, I'd like to access its div elements after everything got loaded, I'm using jQuery(document).ready for that (within the dynamically loaded content).
Problem: Accessing its own elements in the frame document somehow does not work with jquery 1.x in document ready block!
document.getElementById('#someDiv') returns null and jQuery('#someDiv').prop('scrollHeight') returns undefined, although the frame content has that element (accessing it when clicking a button works!). With newer jQuery versions (for instance 3.3.1) it works, but I can't change that version currently. Is there another way to do that?
Thank you!
As the title, how to resize appened iframe to content?
I have already referred other questions:
jquery get height of iframe content when loaded
Resize iframe to content with Jquery
Get height of element inside iframe with jQuery
, but it is still not working. The following are my codes:
$(function() {
$('#appendIframeHere').append("<iframe src=\"http://www.w3schools.com/\"></iframe>");
var iframe = $('#appendIframeHere').find('iframe');
iframe.css("width", "100%");
iframe.css("height", iframe.contents().find('body').height() );
$('#appendIframeHere').text(iframe.contents().find('body').height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="appendIframeHere"></div>
------------------------------------------------------------update------------------------------------------------------------
I use the same way to get height() but it has different value, 0 and 2786. I tried to add a callback function to append() but I have seen some reference said that append() complete immediately so I don't have to use callback. After that I also tried promise().done(function(){...}) to append() but it still get different value from js file and console.
I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/
Info: I've read a lot of questions about jquery accessing iframe and such so, but i've not found anything about the inverse that is: Inside the iframe access the parent document to change, and bind some elements from the parent document.
Problem: I dont know how to do that.
What i've tried:
1st try:
function ajax(){
$(document.parentNode).contents().find("#ajaxLoading").show();
document.parentNode.contentWindow.$('#mainFrame').load(function(){
$(document.parentNode).contents().find('#ajaxLoading').hide();
$(document.parentNode).contents().find('#pnlContentHeader').removeClass('front');
});
}
2nd try:
function ajax(){
document.parentNode.$("#ajaxLoading").show();
document.parentNode.$('#mainFrame').load(function(){
document.parentNode.$('#ajaxLoading').hide();
document.parentNode.$('#pnlContentHeader').removeClass('front');
});
}
3rd try:
function ajax(){
document.parentNode.find("#ajaxLoading").show();
document.parentNode.find('#mainFrame').load(function(){
document.parentNode.find('#ajaxLoading').hide();
document.parentNode.find('#pnlContentHeader').removeClass('front');
});
}
I need some help with that, i dont really know what i'm doing...
This should work using window.parent.document:
$(window.parent.document).find("#ajaxLoading").show();
I have a Firefox addon that injects/executes a jQuery script on every page at sub.example.com. The script doesn't work on one page of the site, because of bad design. Is there any way to stop the script from being executed if a certain element is located on the page?
EDIT: The script I am using has to be executed before the DOM loads. Is there any way to access the HTML file itself and find out if the element exists?
Since jQuery collections are just beefed up arrays, they each have a length property, which tells you how many elements it has matched:
jQuery(document).ready(function($)
{
if ( $('#someElement').length ) return;
// All of your code should go here...
});
Since you're using jQuery, I assume your script is wrapped in a $(document).ready callback, if so:
$(document).ready(function() {
if ($('#breakOnThisElem').length) {
return;
}
});
If your code isn't wrapped in a function like this: change it! :)