I'm writing a WinJS app that takes an HTML fragment the user has copied to the clipboard, replaces their
Later, when I go to display the .html, I create an iFrame element (using jQuery $(''), and attempt to source the .html into it, and get the following error
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
I don't get the exception if I don't base64 encoded the images, i.e. leave them intact and can display iframes on the page with the page showing images.
If I take the html after subbing the urls for base64 and run it through toStaticHTML, it removes the src= attribute completely from the tags.
I know the .html with the encoded pngs is right b/c I can open it in Chrome and it displays fine.
My question is I'm trying to figure out why it strips the src= attributes from the tags and how to fix it, for instance, creating the iframe without using jquery and some MS voodoo, or a different technique to sanitize the HTML?
So, a solution I discovered (not 100% convinced it the best and am still looking for something a little less M$ specific) is the MS Webview
http://msdn.microsoft.com/en-us/library/windows/apps/bg182879.aspx#WebView
I use some code like below (where content is the html string with base64 encoded images)
var loadHtmlSuccess = function (content) {
var webview = document.createElement("x-ms-webview");
webview.navigateToString(content);
assetItem.append(webview);
}
I believe you want to use execUnsafeLocalFunction. For example:
var target = document.getElementById('targetDIV');
MSApp.execUnsafeLocalFunction(function () {
target.innerHTML = content}
);
Related
I have a simple WebApp application that reads the data from google sheet and displays in HTML using materialize css( 1.0.0), JS. I am new to this stack of tools. HTML page has 2 containers and bottom one supposed to be populated (using innerHTML assignment)based on the selection on the top container. The bottom container content is simple card contents in table format. I want to put a HTML Select object with List of values to be displayed and created a Appscript function. I am assigning the function output to innerHTML like this.
-- JS
function generateCards(text_card){
document.getElementById("container-id").innerHTML += text_card;
}
function createAuthorCards(authorName) {
document.getElementById("container-id").innerHTML = "";
google.script.run.withSuccessHandler(generateCards).getCardDynamicText(authorName) ;
}
--
If put copy/paste the function output in HTML it works( goes through rendering when refereshing), but if i use InnerHTML, the listbox is disabled, but all else seems ok. needed imageplease see the 2 attachments needed and missing_listbox images.enter image description here Is there any limitations of using innerHTML in webApp?
I was using google Webapp. It looks google doesn't allow the editing of dynamically created items. So I ended up using Modals to make the selections and save it.
I am with a problem. I am using jQuery.SelectBox for the select box and dropdowns.
It is working fine when the elements are loaded with the page load. But its not working when they are loaded by the ajax i.e on dynamicaly generated elements it is not working.
You can check the file here :- http://rvtechnologies.info/brad/jquery.selectBox.js
This line:
jQuery('<link rel="stylesheet" href="<?php echo DIVATEMPLATEPATH . "/css/jquery.selectBox.css"; ?>">').appendTo("head");
Is completely invalid. You cannot combine PHP and Javascript! PHP is executed on the server, not in the browser. Please learn about the fundamentals of web development. PHP gets run on the server, it generates code that gets sent to the client, which then in turn runs the code locally on the computer (HTML and JavaScript).
CSS codes are style declaration and stylesheets, once the element gets added to the DOM they will be loaded or applied.
Check the name of id, classes and attributes of the generated elements using tools like firebug and see the generated markup.
I have sorted it out.
I need to call the selecbox again on Ajax success.
I have done like this :-
success: function(html) {
jQuery('#loader').empty();
jQuery("#right_search").append(html);
jQuery("SELECT").selectBox(); //Just Added this
initdatepicker();
stat = 0;
}
Is there a way to do this without any exe files or 3rd party things? I cannot use windows form components in web application and I am in need of taking screenshots of different URLs programmatically. Any idea will be appreciated.
Similar question here: Using HTML5/Canvas/JavaScript to take screenshots
JavaScript can read the DOM and render a fairly accurate
representation of that using canvas. I [#Niklas] have been working on a script
which converts html into an canvas image.
See also: http://html2canvas.hertzen.com/
Edit:
Note: You will need to write a web service/web method that accepts a base64 encoded string as an input parameter, and then saves that string (in its raw form, or converted to a file.)
Example usage of html2canvas:
var imageAsBase64;
$('body').html2canvas({
onrendered: function(canvas) {
imageAsBase64 = canvas.toDataURL();
// You now have a base64 string, representing a "screenshot" of
// your <body> element, which you can POST to your web service.
}
});
Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?
I need this attribute to be set via JS:
$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";
The link in the url points to a file, that generates and returns an image.
The image is generated correctly, but not applied as backround.
Clarification
The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.
The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.
I'd thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.
That is the problem. Now, do you guys have any ideas how to overtake this?
Working Example
I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.
As you can see it is indeed possible to change the background dynamically with a generated image:
http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/
Debugging your code
So....what's wrong with yours?
Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.
Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.
On a side note, your javascript code looks a bit foreign to me.
Instead of:
$( "#elem" )[ 0 ].style.background = ...
try using:
document.getElementById('myImg').style.background = ...
Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.
Are you using jQuery?
This should be very easy to do.
Store the generated image url in a variable, and then use jQuery to change the CSS background image value, like so:
var imageUrl = "./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1";
$('#myDiv').css('background-image', 'url(' + imageUrl + ')');
Here's a a jsfiddle demonstrating the concept. Click the div to see the background-image dynamically changed via JS.
http://jsfiddle.net/DigitalBiscuits/F3PUy/2/
Yes its possible to set on-the-fly images as background images, using CSS.
This is no different to how you can use on-the-fly images for img elements.
Please help me to get text (non html/ not formatted) from ajax text editor in asp.net i am using vs 2008.
i am using AjaxControlToolkit.HTMLEditor
you can see same kind of at : ajax HtmlEditor
Well, the documentation on the page you linked to only shows that the HTMLEditor has a Content property, which is the html text, not the plain text. However, the editor itself, on the page, allows you to view either the rendered html, or the html code (the markup).
The editor uses an <iframe> to contain the rendered html. If you want to get the plain text (no html tags), you'll have to do it on the clientside. The <iframe> has an id. You could use something like jquery to do this:
var plainText = $("#iframeID body").text();
$("#someHiddenField").val(plainText);
As long as someHiddenField is an <asp:HiddenField> control, it will contain the plain text of the editor when you post back. You just need to make sure you make the above assignment after you're done editing the HTMLEditor's content, but before you actually post back.
UPDATE
I answered another similar question, and my first answer might not actually get the text of the <iframe>. Try this:
var text = $("#iframeID").contents().find("body").text();
$("#ctl00_cpMainContent_Editor1_ctl02_ctl00").contents().find("body")[0].innerHTML