Uncaught ReferenceError: SWFObject is not defined - swfobject

It sounds like a dumb question and FAQ as well, but I truly don't see any reason not to be able to run it.
I try to run a imagerotator with SWFObject and that's the error I get. I do include properly the swfobject.js file (accessible via the direct url) and I pass the parameters through an XML file which loads independently fine as well. I do use version 2.2.
Here there is my SWF call:
<div id="slide1">Get the Flash Player to see this rotator.</div>
<div id="rotator"></div>
<script type="text/javascript">
var s1 = new SWFObject("/admin/cms/imagerotator.swf","rotator","606","199","5");
s1.addVariable("file","imagerotator.php");
s1.addParam("allowfullscreen","false");
s1.addVariable("linkfromdisplay", "false");
s1.addVariable("transition","lines");//bgfade,blocks,bubbles,circles,fade,flash,fluids,lines,random,slowfade
s1.addVariable("rotatetime","5");
s1.addVariable("overstretch","false");
s1.addVariable("backcolor","0xFFFFFF");// change if its helps to fit better in design (optional)
s1.addVariable("shuffle","false");
s1.addParam("wmode", "transparent");
s1.addVariable("showicons","false");
s1.addVariable("shownavigation","false");
s1.write("slide1");
</script>
I doubt that this usage of the SWFobject is completely inappropriate for this version, although I use a sample code of a CMS including this exact version of the library.

The implementation changed:
1) Your problem is described (and solved) here.
2) Check the original docs here.
Basically you need to use swfobject.embedSWF(...) now instead of var x = new swfobject(...)
In any case, Google is your friend on this one ;)

Related

Script Link in Header - EnableOptimizations Strips Attributes

Not sure if this is a bug or if 2sxc is doing this on purpose, "for reasons."
First, here is the goal. I am in a 2sxc App, in a View using Razor/C#. I need to get the following JS module linked up in the <head> like this:
<script src="//unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js"
type="module" async="async" defer="defer" crossorigin="anonymous">
</script>
Obviously if I just put it in as-is, it gets on the page, but not in the <head>.
If I add the attribute, data-enableoptimizations="true" then its in the <head> but all 4 of my attributes get stripped:
<script src="https://unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js" type="text/javascript"></script>
Additionally, notice that the src had only the leading "//unpkg...", and for some reason, the optimizations have added back "https:" which I do not want.
And where did type="text/javascript" come from? That hasn't been required for years.
I can solve this in the theme/skin by using the DnnJsInclude control like this. It uses ClientResourceManagement and allows me to specify all the attributes in HtmlAttributesAsString like this:
<dnn:DnnJsInclude
FilePath="//unpkg.com/#dnncommunity/dnn-elements/dist/esm/dnn.js"
ForceProvider="DnnPageHeaderProvider"
HtmlAttributesAsString="type:module,async:async,defer:defer,crossorigin:anonymous"
Priority="1001"
runat="server"
/>
This gets me the correct result, but it means my standard content editors now need the ability to edit page settings to use my 2sxc App. Which I do not want (the permissions or the training complication).
I realize I can probably use that DnnJsInclude control from my Razor code, but it seems like this is a valid use case that data-enableoptimizations should handle. Yes? No? Maybe? Maybe it already does it but I don't know the right syntax?
Anyone know how to get 2sxc to do this? Or is this a bug worth reporting regarding data-enableoptimizations? I was especially surprised that it just stripped my valid attributes.
So for some background: once the attribute is set, it will be picked up and taken apart, because DNN will need the parts given one by one, not as a <script> tag.
I would assume that as of now, there is no mechanism which tries to preserve the remaining bits. We haven't looked at this in a long time, and maybe the DNN APIs are missing in v7.4.2 (our minimum compatibility).
But in general: this is currently by design, and could be improved. I suggest you open an issue on github and/or contribute a change ;)
Okay, so I worked it out in code using the DnnJsInclude control. Here is the solution in a nutshell:
#using DotNetNuke.Web.Client.ClientResourceManagement
#{
// Add a <script> tag in the head as a JS module
var include = new DnnJsInclude
{
FilePath = "https://unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js",
ForceProvider = "DnnPageHeaderProvider",
Priority = 1001, // stay out of the way?
HtmlAttributesAsString = "type:module,async:async,defer:defer,crossorigin:anonymous",
};
var loader = (Context.CurrentHandler as Page).FindControl("ClientResourceIncludes");
if (loader != null)
{
loader.Controls.Add(include);
}
}
Which gets the exact output needed thanks to the HtmlAttributesAsString parameter.
I even wrote it up as a blog post with a lot of details.
DNN Details 004: Using the New Dnn-Elements in a 2sxc View?
Since this is dependent on Dnn, it doesn't benefit the Oqtane/hybrid coders.

Adding Segment telemtry to React component that is only one DOM node

I'm looking to add segment analytics to my JupyterLab extension. No worries if you've never heard of a JupyterLab extension - the best way to think about it: I get control over a single node in the DOM where I can place some HTML, so I'm doing the following:
function Welcome(props) {return <h1>Hello</h1>;}
ReactDOM.render(<Welcome/>, dom_element_i_control)
This all works fine - I'm now looking to add some analytics code to this. For example, I'd like to be able to:
See when my code is rendered
See when someone interacts with my rendered element (e.g. if there was a button in the Welcome function, when the user clicked on it).
However, segment is a JS library that is delivered as a script that you load into a webpage at the top in a string tag like:
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&...}}();
</script>
Where would I even put this code? I don't have control over the larger page + HTML, so I'm not sure where I can slap this so I can start using analytics.
Thanks for any information!
My workaround:
Instead of using the above linked segment script, I used the analytics-node package from segment.
I create an Analytics object right before ReactDOM.render - and then can use it wherever I want :)
Note that this will not work for anyone who uses an add blocker, obviously!

gmaps geometa.js not found?

I'm using a plugin which calls http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geometa.js for displaying map with pins on the homepage. However, this link is not found (404). I've searched for the solution too see what to do, but with no luck.
Is there a new version of this javascript available that I could replace this link with the new one? Not sure how else to put it and hope it makes sense.
Not Certain but I think this is the file.
http://pastebin.com/D22BSvb8
EDIT: Think this is the most upto date version: http://pastebin.com/GHpyPTQE

Using ngSanitize to allow some html tags

I have an insecure string from the user that I want to display.
I want a few html-tags like < strong > (without spaces) to work.
All other html should be displayed like it was typed in (that is < should be replace with & lt; and so on)
I'm pretty sure I can use ngSanitize to do this but I can't figure out how.
$compileProvider allows you to set up sanitization "whitelists" for HREF and SRC URLs:
app.config(function($compileProvider) {
var imgSrcSanitizationWhitelist = /^\s*(https?|ftp|file):|data:image\//;
$compileProvider.imgSrcSanitizationWhitelist(imgSrcSanitizationWhitelist);
});
However, the whitelists for "safe" tags are hard-coded and can't be changed the same way. You can see the list here in the source:
https://github.com/angular/angular.js/blob/master/src/ngSanitize/sanitize.js#L186
There is an open request to enhance this functionality:
https://github.com/angular/angular.js/issues/5900
But it has not been completed (yet).
In the meantime, you have a few options:
"Fork" the project and adjust ngSanitize to suit your purposes. Most people don't like to "hack core" in this way, but it's the whole point of Open Source to be able to do things like this. This module doesn't change so much that it would be that hard to keep it relatively up to date as you develop your project.
Live with the list defined there. Most of the time you find that this list is actually pretty good, and it's just that IMG or A HREF tags are broken. That's not because the tag is filtered - that's because THOSE are white-listed separately, and you can use the technique above to accept specific URLs into each of those tags as "safe".
By the way, there is now a possibility.

HTML Bridge not working with cross-domain Silverlight XAP

I've got a complex Silverlight app that uses the HTML bridge functionality quite extensively (in both directions). The app runs fine when the hosting page is from the same domain as the XAP source. Unfortunately, I can't get the HTML bridge functionality to work when the hosting page is on a different domain.
Now, I know the various tricks normally required to get this to work, i.e., everything that's documented here: http://msdn.microsoft.com/en-us/library/cc645023(VS.95).aspx. I've even put together my own simplified cross-domain repro that I was hoping would highlight the problem, but unfortunately, my "repro" works, i.e., both JS->SL and SL->JS functionality work just fine in it, even if the XAP is hosted on a different domain.
Here's what I've tried so far to narrow down the problem:
On my production solution (where I'm having the problem):
Confirmed that "EnableHtmlAccess" is set to true in the <object> tag.
Confirmed that "ExternalCallersFromCrossDomain" is set to "ScriptableOnly" in the AppManifest.xml file.
On my repro solution (where I can't get it to have the problem):
Added multiple libraries with multiple registered scriptable objects.
Added events to the registered objects.
On both:
Tried it with a static <object> tag and with a dynamically created <object> tag (via Silverlight.js).
Tried it with and without specifying handlers for onSourceDownloadProgressChanged, onSourceDownloadComplete, onError, and onLoad.
Tried it with and without a splashscreen.
I'm kinda running out of ideas. Anyone have any suggestions for other troubleshooting steps?
Well, so far I haven't been able to track down the precise difference between the working and the non-working versions. But I came up with a workaround that's sufficient for my needs. As it turns out, only the JS->SL functionality was broken; any calls from SL->JS still worked. So what I did was to register the scriptable SL objects from within Silverlight. In my controlling JavaScript class, I created a function with a unique name, and registered it with the window object:
var mLoadingController;
var mAppId = 'alantaClient_' + Alanta.makeId();
var mSetLoadingControllerId = mAppId + '_SetLoadingController';
window[mSetLoadingControllerId] = function (value) {
mLoadingController = value;
onLoad();
};
And then I pass in the name of the function as a part of the Silverlight app's InitParams:
var initParams = 'setLoadingControllerId=' + mSetLoadingControllerId;
Silverlight.createObject(mSource, mAppHost, mAppId, params, events, initParams);
And then I call that registration function from within Silverlight, like so:
// Do everything necessary to make the LoadingController scriptable.
HtmlPage.RegisterScriptableObject("LoadingController", LoadingController.Instance);
string setLoadingControllerId;
if (e.InitParams.TryGetValue(LoaderConstants.SetLoadingControllerIdReference, out setLoadingControllerId))
{
HtmlPage.Window.Invoke(setLoadingControllerId, LoadingController.Instance);
}
And then I can call it from JS, like so:
mLoadingController.GoToRoom();
Kinda hacky, but it works. Close enough for now.

Resources