I'm trying to programmatically open the hidden div containing the bitrate information in this web page: http://www.myfreemp3.cc/mp3/jamie+jones+cookie+monster
I'm using an hidden WebBrowser, in which i'm injecting and executing this code:
$("[class^='bitrate butt bit']")[0].click();
but it doesn't work.
If you put the code line above in the Firefox debugger's console it works...
This is my code:
webBrowser.Navigate("http://www.myfreemp3.cc/mp3/jamie+jones+cookie+monster");
waitTillLoad(webBrowser); //wait till the document finish to load
string script = "function click_checkButtons () { $(\"[class^='controll_button playlist_button']\").click(); }";
HtmlElement head = webBrowser.Document.GetElementsByTagName("head")[0];
HtmlElement scriptEl = webBrowser.Document.CreateElement("script");
IHTMLScriptElement element = (IHTMLScriptElement)scriptEl.DomElement;
element.text = script;
head.AppendChild(scriptEl);
webBrowser.Document.InvokeScript("click_checkButtons");
This is due to that WebBrowser is basic component of older IE, you can enter settings in registry to run your webbrowser to use latest internet explorer which you have in your computer, Take a look at this link
Will the IE9 WebBrowser Control Support all of IE9's features, including SVG?
Have you tried appending to document.body instead of document.head?
...Tom
Related
We have a problem that is only evident on iOS browsers (iOS 12.0) with our SPA application that uses HTML object tags to load widgets (HTML/CSS/JS files) through JavaScript onto the page.
The issue is an intermittent one when the page is loaded some of the widgets don't display/render on the screen, yet are loaded into the DOM and can be viewed/highlighted with full element properties in the Safari Web Inspector. but are “invisible” to their user. The problem will occur about 50% of the time if there are 4 widgets to load on a page, 2 typically won't display and it will be different widgets not displaying each time, with no detectable pattern.
The widget javascript load events run properly and there are no errors in the console. In the Safari Web Inspector, we can see some of the HTML elements from the non-rendering object are loaded at position 0,0 but their style is correct in the DOM (left and top set correctly, display: inline, etc.).
Here is the code that loads the widgets (the fragment is added to the DOM after all widgets are setup):
function loadWidget(myFrag, widgetName) {
var widgetObj = document.createElement("object");
widgetObj.data = "widgets/" + widgets[widgetName].type + ".html"; // location of widget
widgetObj.className = "widget unselectable";
widgetObj.id = widgetName;
widgetObj.name = widgetName;
myFrag.appendChild(widgetObj); // build widgets onto fragment
widgetObj.addEventListener("load", widgetLoaded, false); // Run rest of widget initialisation after widget is in DOM
widgetObj.addEventListener("error", badLoad, true);
}
Here is the code in the load event that configures the widget once loaded (we work around a Chrome bug that also affects Safari where the load event is fired twice for every object loaded):
function widgetLoaded(e) {
var loadObj = e.target;
if (loadObj === null) {
// CHROME BUG: Events fire multiple times and error out early if widget file is missing so not loaded (but this still fires), force timeout
return;
}
var widgetName = loadObj.id;
// CHROME BUG: Workaround here is to just set the style to absolute so that the event will fire a second time and exit, then second time around run the entire widgetLoaded
if ((parent.g.isChrome || parent.g.isSafari) && !widgets[widgetName].loaded) {
widgets[widgetName].loaded = true; // CHROME: WidgetLoaded will get run twice due to bug, exit early first time.
loadObj.setAttribute("style", "position:absolute"); // Force a fake style to get it to fire again (without loading all the other stuff) and run through second time around
return;
}
var defView = loadObj.contentDocument.defaultView; // Pointer to functions/objects inside widget DOM
loadObj.setAttribute("style", "position:absolute;overflow:scroll;left:" + myWidget.locX + "px;top:" + myWidget.locY + "px;z-index:" + zIndex);
loadObj.width = myWidget.scaleX * defView.options.settings.iniWidth; // Set the width and height of the widget <object> in dashboard DOM
loadObj.height = myWidget.scaleY * defView.options.settings.iniHeight;
}
The code performs correctly in Chrome (Mac/Windows), IE and Safari (Mac), however, presents the random invisible loading issue in iOS Safari and also in iOS Chrome.
Any ideas what causes this and what the workaround could be?
We couldn't find the exact source of this issue after a lot of investigation and are fairly sure this is a webkit bug. However there is an acceptable workaround, which is to replace the object tag with an iframe tag, and it looks to be working exactly the same way (replace .data with .src) with a bonus it doesn't exhibit the chrome bug where onload events are fired twice, so Chrome runs our app faster now.
I'm using Selenium C# to test a pretty complex web UI in Internet Explorer 11. As you might know, Selenium's Click() tends to not work in which case inserting a JS click method is necessary.
I'm running the dynamically generated script below using
(IJavaScriptExecutor) driver).ExecuteScript(script).
Here is the script :
let iFrame = document.getElementById("dkwframe").contentWindow.document;
let element = iFrame.querySelector("[id*='_ImgLnkNewPage_LinkButtonControl']");
element.click();
The script works fine when I execute it directly in the IE console, but when executing with it Selenium I get this :
System.InvalidOperationException : Error executing JavaScript (UnexpectedJavaScriptError)
The IE console is empty so I don't think it's even trying. Also, switching browser isn't an option.
Thanks for the help
Maybe the script is being executed before the page is fully loaded ,try to put it in a page ready event ha dler like that
window.onload = function() {
et iFrame = document.getElementById("dkwframe").contentWindow.document;
let element = iFrame.querySelector("[id*='_ImgLnkNewPage_LinkButtonControl']");
element.click();
}
Or you can check if the fully loaded with :
if (document.readyState === 'complete') {
}
Fellow coders, I am running into this issue, I've a iframe with ID="graph", I am trying to output this html while page loads, but for some reason it's not working on firefox but works great on chrome.
<script language="javascript">
var text = "We are creating your Memory Performance Graph, Please hold.";
document.getElementById('graph').document.body.innerHTML = text;
</script>
Any recommendations on where it went wrong?
The DOM interface for an HTMLIFrameElement object specifies 'contentDocument' as the name of the IFrame document, not "document" by itself.
I was able to get a version of your message to appear in an iframe using
var text = "We are creating your Memory Performance Graph, Please hold.";
var iFrameObj = document.getElementById('graph');
var docObj = iFrameObj.contentDocument || iFrameObj.document;
docObj.body.innerHTML = text;
The only reason to include " || iFrameObj.document" was in case Chrome does not support the standard attribute name (untestested).
In testing I placed the code in a window onload event handler to avoid potential timing issues with accessing the iframe element before finalisation.
I'm using jQuery templates for a website I developed and they work perfectly fine on Chrome, Safari, and even IE9, but the templates just won't render on Firefox. I'm loading them externally, and the $.get is processed (I've checked Firebug, the get goes through and pulls the right file), but then I'm greeted with a blank page and inspecting the html reveals the body element contains only the footer (included in the html), but with display : none, which is how it should be, so the javascript ran to completion (since the footer is hidden inside the loadtemplate functions). It seems that Firefox is simply skipping the $.tmpl() call. Here's the function :
var loadTemplate = function(templateName){
$.get(templateName, function(template){
$.tmpl(template).appendTo("body");
});
};
var loadHomePage = function(){
history = [];
clearPage();
loadTemplate("./templates/home.tmpl");
current_page = "./templates/home.tmpl";
}
var clearPage = function(){
$(".page-content").remove();
$(".page-header").remove();
$("#popup-container").remove();
$(".page-footer").hide();
};
Any help would be greatly appreciated, I can follow up with more code if required as well.
EDIT: even works on Opera, I don't need to support it so the styles don't work (using LESS which Opera doesn't support and a css file strictly for IE), but it still loads the templates without a problem.
Requesting a template may get processed as HTML by some browsers, which in-turn can result in a mangled template. Try setting the datatype to "text" so that all browsers properly return un-modified text.
$.get(templateName, function(template){
$.tmpl(template).appendTo("body");
}, "text");
I am calling a javascript function (function test()) which calls a url which returns a html script. I want to render that on to the page.
I am using this, but when I go to view source I am not seeing any image..
function test()
{
document.write('<SCR'+'IPT SRC="http://demoweb.com/renderimage;type=a;num='+ 1000 +'?" type="text/javascript"></SCR'+'IPT>');
}
This retuns URL http://demoweb.com/renderimage;type=a;num=1000? (if I paste it in browser)
document.write("<img src='http://demoweb/?ct=0:abg22&adv=43nn3gg&fmt=2' width='1' height='1' border='0'/>");
A browser's View Source shows the HTML as-downloaded from the server, not the page's DOM after any scripts have run. For that you'd use a DOM browser, such as Firefox's DOM Inspector or Firebug, or IE's Developer Tools.
Use of document.write is not recommended because it causes a re-parse of the document. It's better to use DOM manipulation methods instead.
Try this:
var img = document.createElement("img");
img.src = "http://demoweb/?ct=0:abg22&adv=43nn3gg&fmt=2";
var imgParent = document.getElementById("whatever");
imgParent.appendChild( img );