Develop Reference

DOMContentLoaded does not fire on IOS Safari

First of all: I'm new to coding in generel. i just started 3 months ago.
I'm setting up a website for a friend. The navbar of it should responsevely change it's html content what works fine on every device i tested. but when i try to set the innerHtml of my nav-ul with DOMContentLoaded, something goes wrong but only on the IOS Safari.
unfortunately i can't use any browser developer tools on my ios safari.
Here is my app.js
document.addEventListener("DOMContentLoaded", function() {
const rect = document.querySelector(".main-container");
const screenWidth = rect.getBoundingClientRect().width;
if (screenWidth <= 800) {
document.getElementById("navbar-list").innerHTML = `<li><img src="./vector/phone1.png" alt="" class="icon"><p id="number">Anrufen</p></li><li><img src="./vector/icons8-whatsapp.svg" alt="" class="icon"><p>WhatsApp</p></li>`
} else {
document.getElementById("navbar-list").innerHTML = `<li>Home</li><li>Fächer</li><li>Konzept</li><li>Ergebnisse</li><li>Kontakt</li>`
}
});
Do i miss some await-stuff because i have to mention some async stuff?
Thanks for your help!

Can you log document.readyState inside of that callback? If it's not loading that means the event fired before the event listener was registered.
More here:https://developer.apple.com/forums/thread/651215

Selenium C# IJavaScriptExecutor throws error but JS is fine

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') {
}

Getting unload to work cross-browser's with a button

I am wondering if I can have the unload method in Javascript do a button.click; or a document.getElementById('target').click(), now I am working on different methods for different browsers but I can't seem to get them it working together.
The reason for this is I want to clear the information in the browser but I can't seem to get the unload method to work right. But I don't even know if the unload method is capable of doing a button.click or a document.getElementById('target').click(); Is there like a list of things this method can or cannot do? Here is the code I am trying to get working:
window.onunload=leave;
function leave() {
// For Internet Explorer only.
if (navigator.appName == "Explorer"){
document.getElementById('kioskform:broswerCloseSubmit').click();
}
// For Chrome only
if (navigator.appName == "Chrome"){
// add code for Chrome to use.
}
// for Safari only
if (navigator.appName == "Safari"){
// add code for Safari to use
}
// for Firefox only
if (navigator.appName == "Firefox"){
// add code for Firefox to use
}
}
So far the only thing working is IE but the other web browsers are not liking the code in the document. But I want to try other methods for the other browsers I am working with. But I can't seem to get browser detection to work at all, any idea's or suggestions or advice is greatly appreciated thank you.

Some browsers (Chrome / FF) does not support the window.onunload method.
See: http://bugs.jquery.com/ticket/10509

Script onload in IE

I have script, which appends in the document:
window.d = document
s = d.createElement('script')
s.setAttribute('type','text/javascript')
s.setAttribute('src',options.url)
d.getElementById(block_id).appendChild(s)
$(s).load(function() {
alert('')
})
In Opera, FF and Chrome load works fine, but not in IE.

The answer to this similar question may help you
Element.appendChild() chokes in IE
The reason may be that appendChild just doesn't work in IE.

Why does IE8 hangs on jquery window.resize event?

I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
console.log('Handler for .resize() called');
});
});
</script>
<div id="log">
</div>
</body>
</html>
Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.
Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).
UPDATE
One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.
var ieVersion = getInternetExplorerVersion();
if (ieVersion == 8) {
document.body.onresize = function () {
};
}
else {
$(window).resize(function () {
});
}
But this does not answer my question: is the continuous firing of resize() a bug in IE8?

If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).
To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize
This article says Chrome, Safari & Opera suffer from this too.

I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the log div that you have there, which means that it is resizing the div and triggering the window resize event.
The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:
var handleResize = function(){
$(window).one("resize", function() {
console.log('Handler for .resize() called');
setTimeout("handleResize()",100);
});
}
handleResize();
This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.