stylesheet not getting applied in internet explorer using iframe - javascript

Hello i am facing problem in all IE browser, I am loading iframe inside div using js code but somehow the css classes are not getting applied inside my iframe components like textbox, buttons,etc. . the same code works for chrome and forefox , only IE is creating problems. my code is like...
var head = document.getElementsByTagName('head')[0];
var myCSS = document.createElement("link");
myCSS.rel= "stylesheet";
myCSS.type= "text/css";
myCSS.href= Url + "/public/css/mycss.css";
head.appendChild(myCSS);
//for IE
if (window.attachEvent) {
window.attachEvent("onload", function() {
var divforIframe = document.createElement("div");
divforIframe.id = "divforIframe";
var i = document.createElement("iframe");
i.id = "myIFrame";
i.src = Url;
i.scrolling = "no";
i.frameborder = "0";
i.width = "500px";
i.height = "300px";
divforIframe.appendChild(i);
document.getElementById("myDiv").appendChild(divforIframe);
});
}

Related

Load CSS file only if element with class is present on the page

I am trying to optimise my loading of CSSS files as I am loading some large CSS files on pages where they aren't used. Is there any way for me to enqueue them only if an element is present with a class on that page.
I've tried the following however, it does not work:
jQuery(document).ready(function($) {
//Script Checkers
var wowJS = $('.wow');
if (wowJS.length > 0) {
$.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
new WOW().init();
});
var head = document.getElementsByTagName('head')[0];
var cssNode = document.createTextNode("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";
//console.log("CSS Node: "+cssNode); = [object Text]
head.appendChild(cssNode);
}
});
I have seen functions that work for adding css files to the head however, none of them allow the ability to make it conditional.
EDIT: I've since just used the getScripts() jQuery function however, I am still in need of knowing how to add css to the header only if required.
EDIT: For future reference for anyone, this is the final working code:
jQuery(document).ready(function($) {
//Script Checkers
var wowJS = $('.wow');
if (wowJS.length > 0) {
$.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
new WOW().init();
});
var head = document.getElementsByTagName('head')[0];
var cssNode = document.createElement("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";
head.appendChild(cssNode);
}
});
Create the nodes first then append then using the appendChild() method, like :
var scriptNode = document.createElement("script");
scriptNode.src = "/wp-content/themes/gowebsites/gw-addon/js/wow.js";
var cssNode = document.createElement("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";
head.appendChild(scriptNode);
head.appendChild(cssNode);
You should use insertAdjacentHTML
head.insertAdjacentHTML("afterend",'<script language="javascript" src="/wp-content/themes/gowebsites/gw-addon/js/wow.js"></script>');
head.insertAdjacentHTML("afterend",'<link href="/wp-content/themes/gowebsites/gw-addon/css/animations.css" rel="stylesheet">');

How do I edit the <head> when i am opening a new window using window.open

I am trying to open a new window and pass in some generated html for a report that I am making.
I have stripped down my source code but the following is a working example of my problem.
var windowUrl = "/";
var uniqueName = new Date();
var windowName = "Print" + uniqueName.getTime();
var printWindow = window.open(
windowUrl,
windowName,
"left=0,top=0,width=500,height=500"
);
var link = printWindow.document.createElement('link');
link.rel = 'stylesheet';
link.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
printWindow.document.head.appendChild(link);
printWindow.document.write('<div><section id="divToPrint"><div class="container page-sub">');
printWindow.document.write('<p>Hello World</p>');
printWindow.document.write('</div></section></div>');
printWindow.document.close();
printWindow.focus();
The write method works great, I am able to write my code I need to the DOM but it only writes to the body. Now I need to add information into the head such as styles, title etc... but I am unable to get my head code into the head tag.
Is it even possible to write the head of the new window? when it outputs the head tag looks like this even after adding the link.
<head></head>
I don't know if it is relevant but I am using ReactJS. Maybe there is some sort of alternative.
You can access the head node of the window, then use some native JavaScript DOM APIs:
var link = printWindow.document.createElement('link');
link.href = 'whatever';
printWindow.head.appendChild(link);
Updated example based on your code:
var windowUrl = "/";
var uniqueName = new Date();
var windowName = "Print" + uniqueName.getTime();
var printWindow = window.open(
windowUrl,
windowName,
"left=0,top=0,width=500,height=500"
);
printWindow.document.write('<div><section id="divToPrint"><div class="container page-sub">');
printWindow.document.write('<p>Hello World</p>');
printWindow.document.write('</div></section></div>');
printWindow.document.close();
printWindow.focus();
var link = printWindow.document.createElement('link');
link.rel = 'stylesheet';
link.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
printWindow.document.head.appendChild(link);

Embedding should have been able to show the button

Please be advised that the following codes are generated by an engineer. (I don't have contact with the engineer right now)
Now here is the scenario. According to the engineer who had created this the whole collection of these scripts should be able to generate a button once edited properly and embedded to our website.
Before I implement this on our own website I want to test these codes to a simple page created through saving codes from our website. I ask the engineer if it is possible and he said yes.
Now here is the code that should be able to generate the button.
clickCall.js
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'rtcninja.js';
urls.jquery = 'jquery.js';
urls.i18n = "jquery.i18n.js";
urls.messagestore = "jquery.i18n.messagestore.js";
urls.jssip = 'jssip.js';
urls.init = 'init.js';
urls.gui = 'gui.js';
urls.css = 'style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
That script, when embedded, should be able to generate a button. The way he embedded the script on their website is through this
<script>
document.write('<script src="sourcefile/clickCall.js">/script>')
</script>
But this won't work on my side so I tried this
document.write('<sc' + 'ript src="clickCall.js">/sc' + 'ript>')
Now my first problem is that this script prevents all other scripts from loading, causing to have an empty output. another is that it won't display the expected button that it was suppose to show on the webpage. My solution to this problems was to implement DOM but I don't know how I'll implement it especially because I can't understand how it works and how to implement it. Could you kindly explain to me how DOM works and how am I going to implement it? Thanks
document.write when executed just writes the string and doesn't execute the inside script.
Hence, instead of this,
<script>
document.write('<script src="sourcefile/clickCall.js"></script>')
you can directly call your script.
<script src="sourcefile/clickCall.js"></script>

Javascript: document.body.appendchild has a null value

I am loading a .js file I wrote. Within that .js file I am creating a Iframe like this
var frmSource = "http://MYLINK.com/mypage.php?" + encodeURI(URLBuilder);
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", frmSource);a
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
ifrm.setAttribute("frameBorder", "0");
document.body.appendChild(ifrm);
URLBuilder contains the GET variables to the next page
The issue occurs at document.body.appendChild(ifrm);
and my error is
javascript typeerror: null is not an object (evaluating 'document.body.appendchild')
I suspect the issue is it is trying to append the iframe to the body but the body has not properly loaded. I am currently only getting this issue in safari.
If your script is in the head, then the body is not defined (null). Put the script in the footer.
I have done something like this to configure my IFrame creation and it is working fine
var urlWithParam = url + encodeURI(URLBuilder)
var iframe = document.createElement('iframe');
iframe.src = urlWithParam;
iframe.id = "iframe_" + done;
iframe.style.position = "relative";
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.right = "0";
iframe.style.bottom = "0";
iframe.style.frameBorder = "0";
iframe.style.borderStyle = "none";
iframe.style.display = "none;";
//if you want to do something after the Iframe load
iframe.onload = function(event) {
};
Moved the script below the body. And it worked like a charm.

setAttribute not working in IE7

The below code works fine in IE9 and IE8 but not working in IE7. May I know, What's wrong with this code?
JS Code:
if(innerwidth>1000 && innerwidth<1500){
var fileref=document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("media","all");
fileref.setAttribute("href","1001aboveie7.css");
document.getElementsByTagName("head")[0].appendChild(fileref);
}
Thanks:)
try this, it works with my IE7
if (innerwidth > 1000 && innerwidth < 1500) {
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.media = "all";
fileref.href = "1001aboveie7.css";
document.getElementsByTagName("head")[0].appendChild(fileref);
}
IE7 do not support:
setAttribute
you use to use base attribute to add it.
var foo = document.createElement("link");
foo.rel = "stylesheet";

Categories