Twitter Widget doesn't work in IE8 when inside an iFrame - javascript

I'm using a Twitter widget and it works fine in IE8, until I put it inside an iFrame. The twitter widgets Javascript file is being loaded from within the iFrame, and as I said it works perfectly on it's own. Any ideas?

After a lot of testing it seems that the order in which the JavaScript is loaded was causing the problem. I had a lot of JavaScript on the page, and after moving the Twitter script tag above all other javascript or css tags in the head of my document it worked!

Related

<iframe> automatically change height to content of <iframe>

At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"

electron js doese not load jquery properly

I have a web page and when I open it in chrome or fireFox, everything is fine, but when I try to open it in electron js with window.loadURL() it comes up with lots of errors because the jquery has not loaded.
Ive tried so many things (injecting js, adding jquery script tag and ...) but the main problem is some of events in those pages are related to document.ready and they are screwed
whats the problem and how should I fix it?
ps: lots of pages has this problem, but a url to test:
online.agah.com
It seems nobody is interested, but however if someone had the same problem, the answer is use the webview instead of loading url in the window.
when the url loads in the webview, magically everything is fine.

Javascript code loading issue with IE7 and IE8

The website in question is cpavalet.com
My javascript loads fine on all browsers except ie7 and ie8. For a few hours now I have been trying to debug the issue to no avail.
I am using jQuery and modernizr, and using the supersized library for the full-sized background images.
The weird thing is, sometimes when I load the page it loads correctly, other times the javascript doesn't work on the page. I think it has to do with the order the scripts are loaded. I am using document.ready for my jquery scripts.
Can anyone shed some light as to why it's not working correctly in ie7 and ie8? I am currently using ie8 for testing purposes.
I am using javascript for: image slider on home page, full-size background images, back to top link to slide to the top, and form validation.
Thanks!
Corey
My guess as to why it wasn't loading correctly was partly correct. I thought that it was because of the order I had my scripts being run on the page.
The answer is that I was using the defer attribute when loading my scripts. When I removed the defer attributes, the scripts started working correctly again.

FF - Iframe in contentEditable are not loading javascript

I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!

Debugging jQuery Mobile injected scripts

In jQuery Mobile, I can define "mobile pages" as divs with data-role=page.
These can be stored in other HTML files, and injected ad-hoc into the main HTML page.
In such a div I can put a script tag, and that script will also be injected into my main page.
The script does not appear as a script tag in my DOM, but rather seems to be injected inline, and thus it does not appear in a standard way in a debugger e.g. FireBug's script panel.
Has anyone found a normal way to debug these scripts (Hopefully in FF or Chrome) ?
EDIT:
Just to clarify - The script tag in the "other" page is not an inline script. It is a:
<div data-role="page" id="some_id">
<script type="text/javascript" src="MyScript.js"></script>
...
</div>
Still, it is injected as an inline script to the DOM.
BTW - if I put the script tag in the HTML's HEAD it is not loaded at all.
EDIT 2:
More clarifications:
I'm writing a framework into which "extension modules" will be plugged on customer site and decision which module (i.e. additional "pages" with scripts) to load is a runtime decision. Therefore I have no prior knowledge in my main page which scripts to load, and must defer loading to "module load" time.
My end goal here is to allow "module" developers to debug their scripts. For this I would like a solution where the references script files are available in FireBug/ChromeDevTools like any other script.
It seems like it's standard jquery (core, not mobile) behavior to remove the script tag from a AJAX-loaded html and eval it inline, instead of leaving the script tag there and letting the browser load it normally.
I don't really fully understand the motives behind this, and it really hampers my debugging options :-(
BTW, I'm using jQuery 1.5.2 (same behavior with 1.5.1) and jQuery Mobile alpha 4 (same with 3)
The script is appended to document on the fly and therefore it's not normally visible to firebug.
There was an add-on that handled debugging dynamically loaded scripts. Inline Code Finder for Firebug but it's last release was in 2009. You probably can use it if you modify the supported versions.
BTW. I belive you should not use that feature of jquery mobile. It's there for a basic support of huge projects with lots of inline script blocks, etc.
You should include your scripts on every subpage and make it work that way
or
Dynamically load your scripts when needed with .getScript() if they're too big to include all the time.
[edit]
Yes, if you put the script in the head it will not be loaded. I repeat: Put the script in the head of EVERY page and bind pageshow of the right page instead of a normal document.ready

Categories