I created a complement to outlook, but i need to use iframe to load one page. It is working in web (safari and chrome), windows (web and outlook), but when i have tried to use the complement in outlook mac, it is showing the next error
The code is
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contoso Task Pane Add-in</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="/src/taskpane/taskpane.js"></script>
</head>
<body>
<div style="background-color: lavender;">
<iframe src="https://login.microsoftonline.com" title="workspace" class="iframe" style="height: 800px; width: 100%;"></iframe>
</div>
</body>
</html>
Error is
Refused to display 'https://login.microsoftonline.com' in a frame
because it set 'X-Frame-Options' to 'DENY'.
Related
In My Worklight hybrid sample application I want google map in I phone (IOS) environment.I am using worklight 7.1, Jquery Mobile 1.4.5
I've done it in android environment but i am not able to seeing map in iphone.
My JS code:
var x=document.getElementById("demo");
function getLocation()
{
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLGeoLocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HTMLGeoLocation.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<!--application UI goes here-->
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script src="js/initOptions.js"></script>
<script src="js/HTMLGeoLocation.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
There are many examples online demonstrating integration of Google Maps in Web apps, including those that use the Worklight client framework.
It is unclear what is your Worklight version, so here are some links you can explore. These also provide sample projects for you to review their implementation and run them locally.
How to display a Google Map on Worklight App
https://www.dropbox.com/s/vozn1hcbs2fb70g/GoogleMapsInWorklight.zip
I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
I am new to Dart and Polymer. I'm trying to create Tabs but they don't show correctly. Here is my code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>Paper Tabs Events</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/roboto.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_pages.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
</head>
<body unresolved>
<core-header-panel flex>
<core-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="dashboard"></paper-icon-button>
<span flex>Main Heading</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="1">
<paper-tab>IMPORT</paper-tab>
<paper-tab>DEFINE</paper-tab>
<paper-tab>DESIGN</paper-tab>
<paper-tab>DEVELOP</paper-tab>
<paper-tab>DEPLOY</paper-tab>
<paper-tab>EXPORT</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages>
<div><h1>Core Page</h1><p>This is content for core page.</p></div>
</core-pages>
</core-header-panel>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
Once they display correctly I then want to dynamically change the content under tabs on tab selection. But that is for later, first the tabs need to display correctly. Any help would be appreciated.
Here is the screenshot how it looks like.
https://www.dropbox.com/s/px2as8lor4a67ro/Screenshot%202015-04-23%2022.59.47.png?dl=0
The parent element of your core-header-panel needs a height (in this case body).
See https://www.polymer-project.org/0.5/docs/elements/core-header-panel.html for more info.
TLDR; You can add "fullbleed layout vertical" as attributes to your body.
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I am using the jquery mobile template from visual studio. In my Layout view I have the following markup
<div data-role="page" #(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">
When my Browse view is rendered I want to change the data-fullscreen attibute to true. Here is the code I am attempting to use to do this..
<script type="text/javascript">
$("#indexPage").live('pageinit', function () {
alert("Code Engaged");
$("#div").attr("data-fullscreen", "true");
});
</script>
I cannot get this code to engage. Where do I place the code to engage it? The layout has several sections..
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#Page.Title</title>
<meta name="description" content="jQuery Mobile Site">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
#*<meta name="viewport" content="width=device-width, initial-scale=1.0">*#
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<!-- jQuery Mobile Latest Styles -->
<link rel="stylesheet" href="//code.jquery.com/mobile/latest/jquery.mobile.min.css" />
#* // reference the minified version of our combined css based on whether we are in debug mode. *#
#if (jQueryMobileTemplate.MvcApplication.IsDebug)
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.css?v=2")" />
}
else
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.min.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.min.css?v=2")" />
}
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<!-- We put these at the top because jquery mobile applies styles before the page finishes loading -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script> window.jQuery || document.write("<script src='#Url.Content("~/js/libs/jquery-1.6.1.min.js")'>\x3C/script>")</script>
<!-- Pre jQuery Mobile init scripts for overriding defaults -->
<script>
</script>
<!-- Load jQuery Mobile from jquery cdn, get latest builds -->
<script src="//code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>
#* <!-- Optionally, load from local site -->
<script src="#Url.Content("~/js/libs/jquery.mobile-1.0b1.js")"></script>
*#
#RenderSection("HeadContent", false)
#*<script src="#Url.Content("~/js/libs/modernizr-2.0.min.js")"></script>
<script src="#Url.Content("~/js/libs/respond.min.js")"></script>*#
</head>
I tried it at the bottom of my "Browse" view as well but nothing. I just want the "Browse" view to execute this code.
The pageinit event has never properly worked for me either for some reason when I'm using asp.net-mvc. You can try using one of the page change events (pagebeforechange or pagechange) instead.