InfoBox iframe css issue?

CesiumJS
1

Hi all,

Okay so I'm really new to this whole InfoBox and iframe thing. As I was searching through the forum for solutions related to the InfoBox iframe, I believe Matthew Amato stated in a previous thread that we are able to inject our own css files this way:

  var cssLink = frameDocument.createElement("link");
  cssLink.href= buildModuleUrl('path-to-css-file');
  cssLink.rel = "stylesheet";
  cssLink.type = "text/css";
  viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);

Link to previous thread:
https://groups.google.com/forum/embed/?place=forum/cesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=https%3A%2F%2Fcesiumjs.org%2Fforum.html#!searchin/cesium-dev/inject$20css/cesium-dev/f0iODd42PeI/XHxzYRTZoH8J

I tried inserting the above lines of codes into, say, HelloWorld.html and checked by inspecting the page. The iframe's css did not change to the new css file (still points to the default InfoBoxDescription.css) and additionally, throws me an error in the console "ReferenceError: frameDocument is not defined".

I even tried replacing the cssLink.href's url in InfoBox.js to point towards the new css file but to no avail.

I'm not sure where I went wrong, maybe I placed it in the wrong file or something, but I hope any of you can point me to the right direction!

Many thanks.

Trialea

2

Hi,

To get the frame use, viewer.infoBox.frame (will solve the reference error)

Also, you need to wait for the infoBox frame to load and then add your CSS file link.

Try,
setTimeout(function(){
var cssLink = document.createElement(“link”);
cssLink.href= Cesium.buildModuleUrl(‘path-to-css’);
cssLink.rel = “stylesheet”;
cssLink.type = “text/css”;
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
},5000);

Monisha

3

Thank you very very much! It's working right now :slight_smile:

Trialea

4

Hi, I'm now faced with another issue.

Besides the CSS, I have also tried injecting scripts into the iframe:

A. jquery
B. my own script.

Initially, I coded it this way:

setTimeout(function() {
  var script = document.createElement(“script”);
  script.src = Cesium.buildModuleUrl(‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’);
  script.type = “text/javascript”;
  viewer.infoBox.frame.contentDocument.head.appendChild(script);

  var myscript = document.createElement("script");
  myscript.src = Cesium.buildModuleUrl('/Apps/hide-show.js');
  myscript.type = "text/javascript";
  viewer.infoBox.frame.contentDocument.head.appendChild(myscript);
}, 5000);

The issue with this is that for some reason, the jquery.min.js will load into the iframe AFTER the hide-show.js

It will then throw me an error:
ReferenceError: $ is not defined

Therefore I coded it this way to get rid of the error by having the jquery to load first before the hide-show.js:

****NOTE: I don't know if this is the proper way to do it, but if there is any other solution, please let me know!*****

setTimeout(function() {
  var script = document.createElement(“script”);
  script.src = Cesium.buildModuleUrl(‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’);
  script.type = “text/javascript”;
  viewer.infoBox.frame.contentDocument.head.appendChild(script);
}, 5000);
    
setTimeout (function() {
  var myscript = document.createElement(“script”);
  myscript.src = Cesium.buildModuleUrl(’/Apps/hide-show.js’);
  myscript.type = “text/javascript”;
  viewer.infoBox.frame.contentDocument.head.appendChild(myscript);
}, 6000);

While I was able to get rid of the first problem, I faced with another.

I have a JSON array of data:
var ListArray = [{"time":"1409340564","latdec.dst":"37.4192","longdec.dst":"-122.057","org.dst":"Google","domain.dst":"1e100.net","latdec.src":"1.3592","longdec.src":"103.9894"}, {"time":"1409340567","latdec.dst":"37.4192","longdec.dst":"-122.057","org.dst":"Google","domain.dst":"1e100.net","latdec.src":"2.0000","longdec.src":"47.0000"}];

So I have a for loop after setting the timeout for the scripts and created my polyline entity with descriptions inside it so that there will be two lines coming from the source location and going towards the destination location.

The scripts that I injected into the iframe earlier will work for one polyline entity, and not the other.

Polyline 1 (Work) - Polyline 2 (Won't work) - Polyline 1 (won't work anymore)

It's a really weird issue, but I hope someone can point out what's wrong with it!

Thank you.

Trialea