I have to display a MEAN.JS app within an iframe, so I started with a simple html file:
<iframe style="height: 100%; width: 100%;" src="http://localhost:3000/#!/workouts"></iframe>
But then the iframe content is empty, can please somebody help me?
Got it: My app is using Helmet (https://github.com/evilpacket/helmet) which setted a DENY in the X-Frame-Options. So, in my Express configuration I setted:
app.use(helmet.xframe('ALLOW-FROM', 'www.mydomain.com'));
And it worked
Related
I am trying to use the Embed component in Fluent UI Northstar to embed a SharePoint Web Page:
<Embed
iframe={{
allowFullScreen: true,
src: "https://tenant.sharepoint.com/sites/SiteName/Lists/ListName",
frameBorder: 0,
height: '400px',
width: '711.11px',
}}
/>
The page doesn't get loaded, all I see in the page is a play icon:
What am I missing?
The component is used within the same SharePoint site, so the user is already authenticated.
I got it to work. I had to give the Embed component a width and height, and use the active prop to have the iframe load automatically without pressing "play".
I am developing a web app to show a youtube video. The app is being developed with node.js and express . So I want to show the video in the html which is write as ejs.
The code looks like:
<li>
<video controls="true" src="<%= problem.solution %>" autoplay="none" preload="auto" width="600" height="400">
</video>
</li>
But it did not play at all, can any one give me some ideas? Or some materials about how to figure it out?
<iframe width="1020" height="815" src= <%= g.url %> ></iframe>
this is what I used, and it worked as the link for the video, you need to use the embed link to video.
To get the embed link, you press the share button, and there you could get a example of a iframe example with a working link.
I have created a Web App bot (Node.js) in Microsoft Azure and am able to deploy successfully. But I can't find any css file or scss file in the code provided or even in the online code editor.
Does anyone have any experience in this?
Thank you
What are you trying to style exactly?
Azure Bots work by connecting them to existing channels like Skype, Facebook Messenger, SMS, etc or making REST calls from a custom application. The bot itself doesn't have an interface to style.
The simplest way to embed chat frame into a static page that you can style is to add:
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>
See this documentation for more information. However, do note that this method will expose your secret key in the source of your HTML and allow other developers to embed your bot on their pages as well.
I am using iframe to include the bot on my website. But I wanted to customize the colors and other such things.
As you are using iframe in your website, which means it will load the site https://webchat.botframework.com/ and the stylesheet file is also loaded in the botframework server site, but yours.
IF you need to customise the style, the easy way is to follow the guide https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline, customise your own stylesheet, and leverage botframework-webchat js lib to build bot application in your website.
If your website is built up by React, you can follow https://github.com/Microsoft/BotFramework-WebChat#medium-in-your-react-website-incorporate-the-web-chat-react-component to customise UI components of bot application.
Try this
<!DOCTYPE html>
<html>
<head>
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'YOUR_DIRECT_LINE_TOKEN'
}),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
},
document.getElementById('webchat')
);
</script>
</body>
</html>
I would simply like have a link to a different page. But when I use:
<div style="position: absolute; top: 230px; width: 600px;
left: 250px; height: 120px">
<h2>
<a href='cgoogle.html'>
Sign in with your Google Account
</a>
</h2>
</div>
The link does nothing. I read that the solution is geturl, but I have no idea how to implement this. Does anyone have an example?
If what you want is open the link in the default browser (note that this may be not Chrome on the user's system), then add target="_blank" to your link:
<a href='cgoogle.html' target="_blank">
Sign in with your Google Account
</a>
However, it looks like what you're trying to do here is authenticate the user. The proper way to do that is to use the Chrome Identity API. You can read more on Chrome user authentication in general here (the API page also has this link).
If all that seems a little daunting, this app sample should get you off the ground.
Also note that "link does nothing" is not exactly true: it prints an error to the console, in addition mentioning the target="_blank" thingy. When you're developing Chrome apps, using the console is imperative (both the background page and foreground page ones) - it often provides very useful feedback on what's going on.
Iam using Phone gap For developing Cross platform mobile application i just started it but i try to fixed the scroll of UIWebView its not working i try it through CSS
<style type="text/css">
html {height:250;}
body {height:250;}
</style>
document.ontouchmove = function(e){ e.preventDefault()};
this code Works For me :)