I have an Angular project, and I need to render an iframe inside one of pages.
This iframe renders another web tool that I need to use inside my project but with limited usage as there is many buttons and icons I don't need. So I need the iframe to just render the required icons. What I think is about display: none; the unneeded elements.
I found some suggestions about updating iframe contents using jQuery, but don't work with me.
Note: The web tool is installed locally but I don't need to edit its original code.
Related
At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)
I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.
I am writing a chat widget, that would be distributed to the end users with little code to put in their website. Usual routine.
My widget is going to be written in React. I know several ways to achieve this. Let me list the ways that I could think of.
Give a code snippet with directly iframe and source url in it. Problem with this approach is, it can be used only if the widget is embed. If the widget needs to be popup, flexibility will be lost.
Give a code snippet with a javascript being loaded asynchronously. Javascript will create an iframe in the parent webpage and src can be set. This widget javascript can have little intelligence. This is the usual approach followed by most of the widget developers.
Of course, source URL will render a React page which is bundled by webpack, in either case.
I wanted to know the best practices of developing a widget. So I went through the popular implementations of it. I liked Intercom's widget very much. It is written in React. I analyzed how it works.
The minimal javascript is loaded async on the webpage. It is injecting an iframe with id intercom-frame. That iframe has a script in it's head with a source URl. Obviously it is React bundle.
The thing that I don't understand is, below this iframe, a div is created with three iframes in it. One to show the chat bubble, another to show the chat bubble icon, the last one to show the actual chat window. Those iframe doesn't have source url and I guess the bundle is served from the first iframe created by the widget javascript.
I came across this SO question, which partially answers my question. From the answer,
expose some API between your customer webpage and your iframe, using window messaging.
the main code (the iframe code) is then loaded by this first script
asynchronously, and not included in it.
What I don't understand is,
1.) How they would have achieved it with window messaging?
2.) How they would have managed to create a div with iframes in it, from another iframes script?. Widget javascript is not creating those elements, based on it's source. It should have been done by the React bundle in the iframe generated by widget js.
3.) How a react bundle inside an iframe can create react elements in the parent DOM?
None of the iframe created by Intercom's script has src attribute, that means they are not subject to the same origin policy. Therefore, they can modify parent page html and vice versa.
However, I don't understand why they need to have separate iframe. And why using a script to inject another script which inject the main html content. Doesn't the first script have enough ability to inject html content? I'd love to be lightened about these things.
I have a chat website using node js and angular, and I have made the login/signup and chat page using these. but the problem is, whenever I load the chat page it uses the style from the other pages, and basically acts like a different section of the same page, It also merges the login/signup together, which is ok, because they have the same style just different number of form boxes, I want to stop angular from merging the styles from the login/signup with the chat and have it use its own style.
All help would be very much apreciated, thanks in advance.
And as far as I have been told and know, there is nothing in my own code that is preventing this, it is only angular itself. strong textBy the way, As far as I know, certain things the body of the different pages cant be individually styled, and If I were to merge html's it would take a while and research and I dont really want to do so.
The idea of loading pages as partials is not loading its css and js files etc.
You need to have only one file as index.html and inside,
define <ui-view> tag this is where you have to load all your partials to, but not an entire page, having html tags and everything.
Take a look at this pattern to load all your partials into one file.
and then,
I highly recommend you check this web site out to set nodejs to set all the missing routes to your html file as well as defining your "/css", "/js" etc.
I have just merged these two working methods to make a very concrete restful application structure.
All you have to do to avoid this problem is to write your css with starting parent class. In this way your css will work only if you have parent element with specific class.
.signIn .button {
}
.chat .button {
}
Write it like this and the button in different elements will have different style
I was following this tutorial on Microsoft's developer network concerning using asp.net and mvc model with sql database. Here is the link to the tutorial that I was following
http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started.
So basically, I wanted to play around with the design of the file which is defined in these three files bootstrap.css, bootstrap.min.css, and web.css.
As to my understanding , bootstrap is an html, css, and javascript framework which has the design for the elements already defined. In Visual Studio, I began to edit the bootstrap.css file by changing background-color of the jumbotron element. However, when I saved the file and ran my web application , I noticed that the color remained the same and did not change. But, when I defined the design for the .jumbotron element in the web.css file, the element's background color changed accordingly to red.
Essentially, what I want to know is if bootstrap.css is restricted for editing within the template?
What is Bootstrap
I think you're trying to refer to the Twitter Bootstrap that is used all around the Internet. It contains most of the Styling techniques for the Elements, such as buttons, inputs etc.
When you edit a website's Stylesheet, (Bootstrap.css is a Style sheet and its name doesn't make it write/edit protected file) you get the style that you've applied to it.
http://getbootstrap.com/
Web.css
This file might be the default Style sheet that was created by the Developers at Microsoft while creating the Template for the Website that you're using.
Secondly, when you edit and create this file, it is also a Style Sheet which means it would apply the style to your website and all the web pages who are refering to it.
You're right. It has all the pre-defined methods and contains all of the contents and styles required to make a web page responsive. For more: https://en.wikipedia.org/wiki/Responsive_web_design
What might have caused this problem would be cache. When you first loaded the web page, it would have captured the New Style sheet from the file System and would have applied the styles. But second time it would have loaded the File from the Cache.
https://en.wikipedia.org/wiki/Cache_(computing)
This way, the browser would load the last successive layout of the Web Page. Without loading a new StyleSheet from the File System.
I really think, you need to reload the page using CTRL + F5 button. This would be helpfull in this manner! Because Bootstrap.css is editable and you can edit it. It doesn't prevent editing, only caching would be the problem here.