I have a simple html page that sources a javascript file. The javascript file's only purpose is to write the following...
document.write('<img src="http://www.location.com/image.png">');
Once the information has been written, im needing some javascript to extract the url and the image source and return the url and image locations alone.
Any help is appreciated. Thank you in advance!
Check out this answer which gives shows you how to do it with JQuery or just plain Javascript
UPDATE:
If you have the ability to modify the HTML, then why don't you put in a DOM element that you can hook on to right after where the image will be inserted? Then you can use the following JQuery:
var linkDest = $('#Anchor').prev().attr('href');
var imgSrc = $('#Anchor').prev().children().attr('src');
Which you can see in this JSFiddle example
Related
I'm trying to write a online document editor with TinyMCE 5 as editor and Aspose.Word v20.8 as converter.
But when I convert the DOCX to HTML5 with Aspose.Word, it is not rendering as expected in TinyMCE.
The HTML looses for example headers, footers, MergeFields, IF, TableStart:TableEnd sofar I can tell now.
I need this HTML has all the data because I need to convert it back to DOCX again.
Code to generate the HTML5 is:
var doc = new Document({Stream_Of_DOCX});
var options = new HtmlSaveOptions();
options.SaveFormat = SaveFormat.Html;
options.Encoding = System.Text.Encoding.UTF8;
options.UpdateFields = true;
options.ExportRoundtripInformation = true;
options.ExportImagesAsBase64 = true;
options.ExportFontsAsBase64 = true;
options.ExportPageSetup = true;
options.ExportDocumentProperties = true;
options.ExportHeadersFootersMode = ExportHeadersFootersMode.PerSection;
options.HtmlVersion = HtmlVersion.Html5;
doc.Save($"{fileName}.html", options);
The code to convert the HTML5 back to DOCX is, were the model.Html is the TinyMCE textarea:
var doc = new Document();
var builder = new DocumentBuilder(doc);
builder.InsertHtml(model.Html);
doc.Save($"{fileName}.docx");
Can anybody help me to get this working with some code examples?
Or maybe has a better idear to accomplish the task.
The main idear is to be able to edit DOCX files online, without to have to download it and upload again with some windows service as client for example.
Aspose.Words do preserve headers and footers upon saving to HTML if ExportRoundtripInformation option is enabled. In this case Aspose.Words writes header and footer content with special css attributes, which are understood by Aspose.Words:
<div style="-aw-headerfooter-type:header-primary; clear:both">
<p style="margin-top:0pt; margin-bottom:0pt; line-height:normal">
<span>header</span>
</p>
</div>
Also, Aspose.Words preserves some fields (PAGE, NUMPAGES, NOTEREF, REF, AUTOR and TITLE). For example, PAGE field is exported like the following:
<span style="-aw-field-start:true"></span><span style="-aw-field-code:' PAGE \\* MERGEFORMAT '"></span><span style="-aw-field-separator:true"></span><span>1</span><span style="-aw-field-end:true"></span>
Such content is recognized by Aspose.Words upon reading HTML and loaded into the model as field. I logged a request WORDSNET-21037 to preserve other types of fields too.
I am not familiar with TinyMCE, but I suspect that custom attributes used by Aspose.Words for roundtrip MS Word features are removed and that is why Header and Footer are not preserved in your case.
Disclosure: I work at Aspose.Words team.
I have an http api that give me html response, and I want to "preview" it.
But there is some javascript code in it, and without execute them, it won't give me the right page.
I currently manually copy & paste them in some aaa.html file and use chrome to open it(file://aaa.html), but I want to simplified those steps.
Is there anyway to do that in postman? or is there any postman alternative can do that?
There is an alternative to do this in Postman itself. You will have to use pm.visualizer. Just open your API request which is giving you the HTML response. Then go to the Test tab, add the lines below, and then click on the Visualize tab:
// save your html response in the template and then
const template = pm.response.text();
// set that template to pm.visualizer
pm.visualizer.set(template);
From Postman official documentation
Postman provides a programmable way to visually represent your request responses. Visualization code added to the Tests for a request will render in the Visualize tab for the response body, alongside the Pretty, Raw, and Preview options.
You need add to the Tests for a request:
var template = pm.response.text();
pm.visualizer.set(template);
and see result on the Visualize tab (after Pretty, Raw, and Preview options).
Postman result HTML with JS and CSS
To fix the error:
Refused to load the image 'file:///C:/some.png' because it violates the following Content Security Policy directive: "img-src http: https: data:".
if the content simply does not find (404 Not Found) it along a similar path 'file:///C:/some.file'
need to add the HTML tag to the section of the response body:
var response = pm.response.text();
var base = '<base href="https://some.domain/">";
var template = response.replace('<head>', '<head>' + base);
pm.visualizer.set(template);
this answer also solves the question in this comment.
For more information:
Postman Visualizing responses
HTML <base> tag in MDN Web Docs
Im try to code this html code for the ember js format, but i cant do it, how can i fix it?
<h5>Thursday. May. 05. 2017</h5>
<div class="progress-bar position" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756"><script>$(".progress-bar").loading()</script></div>
I a guessing you are trying to add data-tags
For That you have to add
Ember.LinkComponent.reopen({
attributeBindings: ['data-dismiss']
});
above line to your route file.
And if you want data-percent="48" to be dynamic just change it to data-percent="{{value-from-controller}}".
I could not fully understood your problem , Let me know if this help or you want something else.
link on how you can add data tags
I don't know much about HTML or imacros.
I'm trying to make an imacros script that takes a screenshot of an image on the page, but the website has a navigation bar which when imacros takes the screenshot covers half of the image.
How can I create an imacros script to remove this navigation bar from my screen?
In inspect elements, I can get rid of it by removing:
So how can I remove this in imacros please?
Thank you
Use Javascript for this.
To remove element by ID use this code.
var id = window.document.getElementById("page-container");
id.parentNode.removeChild(id);
Instead of "page-container" put your ID you want to remove
To remove elements by class
Use this:
var collection = window.content.document.getElementsByClassName("Class-name");
Array.prototype.forEach.call(collection, function(node) {
node.parentNode.removeChild(node);
});
It's possible with imacros and url goto as iim script. Or you can use pure javascript as js file in your imacros.
Example with url goto and class name:
URL GOTO=javascript:var<SP>delclass=window.content.document.getElementsByClassName("class<SP>name");Array.prototype.forEach.call(delclass,function(node){node.parentNode.removeChild(node)});
What I am trying to achieve is to find a way of displaying a wiki page content in a floating iFrame ( and of course keep the styling ) for a tool that I am developing for our employees. Right now the tool I made is using jQuery dialog box to display a specific document / pdf, For compatibility and usability purposes I would really like to upgrade that so it uses a wiki page instead of documents / PDFs.The problem that I am facing is that there is no really direct link to the content of a Sharepoint wiki page instead the only available direct link is the one to the page all together with all the navigation menus, option panel, user panel etc. I want to avoid using javascrip to strip away these elements. Instead I am simply trying to find out if sharepoint 2013 has some more elegant way of providing the content such as: Web service or javascript SP API.
My ideas so far:
REST Url to give the content back? I know for sure it works for lists and libraries but I couldn't find anything in the REST API About wiki page content
SP.js ? Couldn't find anything about that either
Anyways, it could be possible that I have overlooked things, or probably haven't searched hard enough. However, any help is very very welcome. If you don't know about a concrete solution I would be very happy with nice suggestions too :)
If there is nothing out of the box I will have to get to my backup plan of a jQuery solution to get the page and strip off all unnecessary content and keep the styling.
I believe you are on the right track with REST API, in Enterprise Wiki Page the content is stored in PublishingPageContent property.
The following example demonstrates how to retrieve Enterprise Wiki Page content:
var getWikiPageContent = function (webUrl,itemId,result) {
var listTitle = "Pages";
var url = webUrl + "/_api/web/lists/GetByTitle('" + listTitle + "')/items(" + itemId + ")/PublishingPageContent";
$.getJSON(url,function( data ) {
result(data.value);
});
}
Usage
getWikiPageContent('https://contoso.sharepoint.com/',1,function(pageContent){
console.log(pageContent);
});
And something for those of you who like to have more than one different examples:
var inner_content;
var page_title = "home";
$.ajax({
url: "https://mysharepoint.sharepoint.com/MyEnterpriseWikiSite/_api/web/Lists/getbytitle('Pages')/items?$filter=Title eq '" + page_title +"'",
type: "GET",
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function (data) {
if (data.d.results[0]) {
inner_content = data.d.results[0].PublishingPageContent;
}
},
error: function(){ //Show Error here }
});
That's what did the job for me.
This example fetches the inner content of an Enterprise wiki page by Title( make sure you are not using the Name of the page, although Title and Name can be given the same string value, they are different fields in sharepoint 2013 )