Removing HTML element in iframe with JavaScript - javascript

I'm attempting to remove an image from an embedded iframe (inline iframe). While it works sometimes, sometimes it failes with an error. I am running this code on Chrome. This behaviour is strange. I have tried this on a few sites and I am unable to find any reason for this.
I would like to know why it fails sometimes and does not sometimes with all parameters the same (I'm simply executing this in the console). Secondly, if possible is there an alternative solution?
$("#content_ifr").contents().find("img").remove();
Error message that occurs sometimes:
Uncaught TypeError: Cannot read property 'contents' of null
If it helps, I'm attempting to remove images and extra content from the WordPress page editor (Classic) using JavaScript.

Being that you said it sometimes works and sometimes it doesn't. When it works, check the Javascript context. I was running into issues where my code worked with DevTools opened, but if I refreshed the page, the javascript context would revert to "Top", and I needed to be in that frame.
[

Turns out that my Chrome extension was interfering with this. We were attempting to run this script using a Chrome extension on a WordPress site.
Changing these lines to this worked:
jQuery("#content_ifr").contents().find("img").remove();
As #Jason Owens pointed out, the context was for some reason switching. I noticed that using 'jQuery' instead of $ seemed to work. I think this was because the Chrome extension was using standard jQuery as a dependency. However, '$' didn't work WordPress avoids the '$' symbol using noConflict and uses 'jQuery' instead.

We can't remove elements from Iframe but we can hide
Try This:
$(document).ready(function(){
$('#content_ifr').contents().find('img').hide();
});

Related

Calling a function in an iFrame in IE9

I have a problem that is specific to IE9.
We are using Autodesk MapGuide which has a framework of several nested Framesets. I am trying to call a Javascript function that sits within an IFrame that is within the top level frameset. (Please I dont want to discuss the merits or otherwise of framestes here.)
I have adapted some code I found in another thread using Jquery
window.top.$("#MyIframe")[0].contentWindow.MyFunction();
This works perfectly in IE7 and IE8, but as soon as I try it in IE9 I get the following error:
TypeError: Unable to get value of the property 'contentWindow': object
is null or undefined
I suspect that it is struggling with the framesets and can't find '#MyIframe'.
Is there some other format I can try to get around this? Many thanks in advance for your help.

Uncaught TypeError ONLY in Chrome

I#ve a very strange problem calling a simple function in JavaScript.
Just for example, even a simple:
click
or:
click
gives me an Uncaught TypeError: object is not a function.
But ONLY in Chrome and ONLY on my Notebook. On my Workstation (same system, exactly same Chrome Version) and in every single other browser this line works as expected.
Im Working with JS since a few years, but this error drives me nuts since days.
The Website comes with scriptaculous and some handwritten JS, but nothing really special.
scriptaculous works well, JS-Console shows no errors except the one #Chrome on my Notebook.
Anyone of you ever had this before?
I#ve really no idea whats going on.
My suggestion is to assign it via javascript and not like an inline attribute. Sometimes you get odd behaviour setting it as an attribute.
You could use jQuery:
jQuery('.myClickableLink').click(function(){ alert(123) })
I think that's a simpler way.
I am betting you have a pop up blocker installed on that machine that hijacks window.alert. Disable the plugins and see if it works correctly. [Normally a pop up blocker does this]
use
window.alert('msg)';
it will work...

Javascript firefox issue

I developed a .htm document with an in-built script for javascript to run a program. In google chrome, the program works fine, but I got a beta test complaint that it didn't work on firefox 14.01 or opera. On testing with firefox 14.01, I can confirm it doesn't work (I assumed opera to be the same). I cannot insist the audience upgrade their browsers, as this is supposed to be widely compatible.
Doing a little tracing of the issue, I installed Firebug, which, on clicking the Javascript button to generate a coordinate the first time, it worked (clearly showing the function is defined and exists), but the second time, Firebug complained that:
"ReferenceError: GenerateCoord is not defined".
This wouldn't be so ironic if it only did this after generating an (encrypted) coordinate (thus calling GenerateCoord that is supposedly 'undefined').
If one looks in the code, one can clearly see that the function GenerateCoord is clearly defined before it is called. I would say firefox has an 'onclick' issue, but then it begs the question why did it work the first time I clicked it (calling GenerateCoord via 'onclick') but not the second?
Reloading the file allows the button to work the first time, and the first time only. I am baffled as to how firefox can call a function one time that it then says is undefined the next. Am I missing something here?
Javascript and HTML code can be viewed here:
http://pastebin.com/4qykTfEW
-
How do I solve the problem, and is there an easier solution than re-writing the code to avoid onclick (that seems to work in certain circumstances but not others)?
The problem is that using document.write overwrites the entire HTML page, thus inadvertently removing the GenerateCoord script. I'd suggest appending the link to the document (in ShowTarget) rather than attempting to re-write it.
For example, have a container element where the link should be:
<div id="links_container"></div>
Then to append the links, use:
document.getElementById('links_container').innerHTML = Link;

How can I debug JS code added into DOM by an AJAX call?

I have a webpage which loads properly formatted html forms using AJAX calls. This HTML also loads javascript code along with it and it is not working. As I am using jQuery I tried to add live() but it didn't help me. Now I need to debug this. How can I set breakpoints or watch on this code using firebug? I am using jQuery1.3 and can not deviate from it.
TIA
I'm uncertain from reading your question as to whether or not you have access to and can modify the dynamically loaded script, but if you do, add this statement:
debugger;
where you want your breakpoint.
Also note that although Firebug is perfectly capable of displaying dynamically loaded scripts, I think it hides them by default.
Also, if you have the option of using Chrome or Safari, you can just throw an exception from the point where you want to break, then set the Chrome or Safari debugger option to break on any exception. For example:
try {
throw new Error("");
}
catch () {}

How to open a window in asp:updatepanel

I have a pop-up CustomControl which I use in a large-scale web application. The pop-up works well everywhere other than when used inside an asp:UpdatePanel, the problem arises when controlling the visibility of the pop-up (the pop-up is nested in a table) with other controls:
When I click the button to open the window I get Error: Object expected and when I try to debug the error with IE 8 JSEditor I get ``Source Code is not available for this location.
I believe that the code of the pop-up is not being initialized completely, but it is just my guess and I don't know how to resolve this issue.
Any help or ideas will be appreciated.
While I can't get to see that question title has a lot to do with the subject at hand,
Most (if not all) Object Expected error occurs when you add a reference on your page to a JavaScript file which doesn't exist or cannot be opened.
When you run your website in debug-mode, VS will put another pseudo-project in solution explorer, navigate through the files there and you will find the already loaded-version of JS, you can set breakpoints there and see what code exactly is "not available".
Note: This is for Web Applications, I'm not sure if it applies to Project-less Websites.
Does this work in other browsers? Have you tried Firefox and Firebug to investigate the issue or is this specific to IE.
Having code in an ASP:UpdatePanel means that the Microsoft Ajax javascript include will be loaded and come an interfere with the object model you are normally expecting to get. Are you certain of the id or name you are trying to find as this might not be returning an Object hence the error.
I have used jQuery and classes and styles to add behaviour after the page loads to avoid id issues. The $jQuery.live() function is useful to ensure handlers get bound to items delivered to the page with MS Ajax.

Categories