This is the URL of my website http://35.154.165.122/#/iLeadLandPage.
The whole website is made in Angular.
What I need to do is I need to include this website into another HTML webpage. I need to include this website into another div container of a new HTML page.
I need to do something similar to this. I am including a new URL into a div in a new webpage
...........
<div id="gabriel-embed" style="min-height: 800px;">
<script src="https://embed.gabrielny.com/eshopreact.js?key=1d767b46-27e8-4b05-8abf-776514fc9771&division=fashion&noframe=1&attachTo=gabriel-embed&eager=1"> </script>
</div> ............
How can I do this for my Angular app?
I need to replace the src in this with my Angular app's IP so that whenever I make a new HTML file the component get loaded.
How can I achieve this?
You can embed it inside an <object> tag using this:
document.getElementById("gabriel-embed").innerHTML=<object type="text/html" data="http://example.com"></object>
Be aware of using the same protocol (HTTP/HTTPS) for both resources, otherwise the browser won't allow this
Related
I am wondering if there is a simple way to share html files (like the navbar, header, footer) across several pages (index.html, about.html, etc.) without using jQuery or fetch and instead using html or JavaScript only?
Assuming an 'index.html'-file and a 'common'-folder containing the 'navbar.html' and the 'footer.html':
index.html
common/navbar.html
common/footer.html
How could I get the code from inside the navbar.html or footer.html get inserted into the index.html?
You can use <object> for that.
<object type="text/html" data="common/navbar.html"></object>
<div>my index.html</div>
<object type="text/html" data="common/footer.html"></object>
I am developing a Chrome extension and attempting to insert a large amount of HTML and CSS into a webpage when the browser action button is clicked.
So far I have a working test version but it is a mess and I want to clean it up.
Currently, the background.js file is calling the content.js file to run by passing a message to it when the browser action is clicked. The content.js file contains a function which is then called. This then generates the HTML and CSS via commands such as:
function buildExtensionUI() {
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.style.position = "fixed";
}
This div also has other divs, text, buttons, etc inside it. The function currently has close to 100 lines of javascript code, similar to as seen above to generate the HTML, give them all ids, and style the CSS, and I have much more I want to add. I have tested the code I have and it is doing what I want it to for now.
However, I want to extract the code into HTML and CSS "template files" so that I can work with them and edit them properly. This will eventually be a very large application so I want to do this now before I progress any further.
I have Googled extensively and have not yet found a working solution. I have created an HTML template file - e.g:
<template>
<div id="myDiv">
<div id="closeButton">
×
</div>
<div id="centerDiv">
<h1 id="title">
My Title
</h1>
<h2 id="subTitle">
</h2>
<textarea name="textBox" id="textBox" cols="50" rows="4"></textarea>
<button type="submit" id="button">Submit</button>
</div>
</div>
</template>
and a style.css file which references the id of the HTML file. The HTML will have to be dynamically updated with Javascript eventually also.
Is it possible to create a Javascript variable or object which loads the HTML template file which can then be injected in the webpage when the user activates the browser action? Can it be done is background.js and then sent as an object/variable to content.js?
What other possible solutions are there?
Any questions please ask and I can clarify.
Thank you.
The background script can only send simple JSON-compatible data in messages so it can't send a DOM element such as template. It can read files from the extension directory into a string via fetch('/file.html'), then send it to the content script, which will either assign it to innerHTML of an element or use DOMParser API. But HTML parsing of such a big string would be slow. You would also have to use ShadowDOM to isolate CSS.
There's a simpler and faster solution: create an iframe element in the content script that points to a html file in your extension that's exposed via web_accessible_resources in manifest.json. Inside that HTML file you can do anything you want, load any scripts you need. The next step would be to use a library like React or Vue or Svelte inside that file that compiles your HTML into virtual DOM. Look for tutorials on that by googling "web_accessible_resources iframe content script".
I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you
The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags
The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/
As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.
Is it possible to embed an external HTML page inside of AngularJS? For instance if i have a page at "localhost:8080/mypage/5533n", is there an easy way to embed inside my angular app?
I have a graph/table that I want to display, but i keep hitting Lexer errors, and sometimes CORS problems which I already fixed. I'm using the below code:
<div class="slide-animate" ng-include="http://localhost:8080/#/notebook/2APHT5YD2/paragraph/20150609-170553_989764970?asIframe"></div>
Seems like you are missing ' here for your ng-include URL.
ng-include="'http://localhost:8080/#/notebook/2APHT5YD2/paragraph/20150609-170553_989764970?asIframe'"
I have a rails site where users make a custom profile. It's a picture of themselves with a link and a title sentence, sorta of like a billboard with words.
I want to take this show view from rails and create custom javascript snippet of code for each user so they could copy and paste it into their own websites and blogs and have it show up according to my rails site.
How is this done? Is there a gem?
Thanks
One option is to use fixe sized iFrame, which acts as a sort of window into another site, instead of javascript. The main benefit of using an iFrame is that its isolated from the parent page's CSS and Javascript. So, none of that pages' styles/scripts will affect the display of your code. You can simply serve up a regular HTML code in the iFrame.
The snippet would look something like:
<iframe src="http://yourdomian.com/profile/1/widget" height="100" width="50" />
a simple js script like this :
<div id="profile"></div>
<script type="javascript">
$.get('/user/101/profile', function(data){$("#profile").html(data)});
</script>
and in your /user/101/profile, use render :partial => 'profile'.