I'm trying to figure out in Angular 2 how to do the following
Enter a url into the address bar and load an iframe based on that URL
For instance,
localhost:3000/http://test.com should load a full screen iFrame of test.com
Could anybody provide any reference to this?
There's no any in-box solution in angular package.
But I see you could make it with next steps:
create FrameComponent component that will show iFrame the way you need
configure route to match FrameComponent
Navigate by url and extract path from activatedRoute
add url to iframeSource
profit
But you'll meet some issues - cross origin navigation, not safe url, etc.
One of them could be fixed with DomSanitizer and SafeResourceUrl from #angular/platform-browser.
A made some proof to show what I mean:
https://plnkr.co/edit/9sgwAy?p=preview
Related
So we want to create a big website with nextjs and strapi.
We sometimes have deep nested pages like
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
How is this possible?
I have tried to setup dynamic routing in nextjs which is working fine, but I have a problem.
If I want dynamic routes which are all nested I need to do something like this:
I know it's ugly, I'm sorry.
so now when I go to
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
I just get the latest word from the URL and take that and put that into my API to get the right data which is working fine! I configured strapi so it finds by slug and not by id. So my API URL looks like this: www.myStrapiInstalation/api/pages/parttime-bijbelschool
but when I go to
www.ourwebsite.com/onderwijs/parttime-bijbelscholen
It's also working! but that's not good! Because it needed to give me a 404 page because it doesn't exist but now it just takes the latest word and gets the data from strapi. My API URL is still this of course: www.myStrapiInstalation/api/pages/parttime-bijbelschool
So what do I need to do?
Is it just not possible to make everything hardcoded and do I need to make nested folders with real names like: 'onderwijs', 'activiteiten' etc.
Or can I make everything dynamic so that people can make nested routes in nested routes in strapi?
I feel like this is a very stupid question, but I'm really stuck here.
Next JS allows catch-all routes, which is useful for nesting pages and have this format:
pages/post/[...slug].js
In your example, the pages folder structure would be:
pages/secondNest/[...page].js
However, since you're using Strapi to fetch the content, the routes of these pages should be known in advance so that if the user navigates to an invalid page, the result should be 404.
You can set the valid routes in Next with getStaticPaths. But notice that you will also need to set up a custom controller in your Strapi application to return the content tree of your website the way that getStaticPaths expects.
That way, it's ok to use the last part of the URL to get the content.
One disavantage of using catch-all routes, though, is that you must know the base of each URL. For example, if you have the following URLs
www.example.com/onderwijs/bijbelscholen/parttime-bijbelscholen
www.example.com/activiteiten/bijbelscholen/parttime-bijbelscholen
the folder structure in pages would be:
pages/onderwijs/[...page].js
pages/activiteiten/[...page].js
The key factor here is that the paths following the base of the URL should be set statically with the help of a custom controller that returns the tree of the content.
I need to obtain my project URL so that I create a link to another section of my site when say for example new content is added I can append this location onto it.
Is there a way I can obtain this address
http://localhost:56672/ or http://mywebsite.azurewebsites.net/
If you are creating links manually you should just use a relative URL instead of absolute. So instead of:
http://mywebsite.azurewebsites.net/some/link/here
Use this:
/some/link/here
The browser will automatically fill in the hostname.
If you are linking to an action method, then you should be using Url.Action or Html.ActionLink.
Do you know how to delete or replace the kibana logo during loading as shown in the following picture ?
Indeed, I am importing through iframe links some graphs in my page web and I want to disable this feature.
Thanks.
Regards,
S
For all those searching for the solution in Kibana 6.1, Here it is
Display Message Part:
Navigate to src/core_plugins/kibana/translations/en.json file
Change value of UI-WELCOME_MESSAGE to what you want it to be.
The Logo Part:
Navigate to src/ui/views/ui_app.jade file
Change background-image of the css class named .kibanaWelcomeLogo to the image url of your own.
Save your edits and restart Kibana and you are done.
Have a good day!
Here is a reference to the markup for the loading indicator: https://github.com/elastic/kibana/blob/master/src/ui/views/ui_app.jade#L26
You will need to do this within Kibana unless it's on the same domain do to the cross-origin policy. A plugin would most likely be the easiest/cleanest route.
I've created a project with the moovweb sdk and have trouble editing the content within an iframe on one of the pages. For instance, moving a div around inside the iframe doesn't seem to work with the tritium I'm writing. What can I do with tritium to make this work? The domains are different FYI.
Unfortunately, Tritium only allows you to edit the attributes of the iframe itself, not the content within.
This is because the request for content in the iframe is made after the browser constructs the DOM of the main page. Tritium can only intercept the first request for the main page, not the second request for content from a different domain.
I know of two workarounds:
Add the second website as a Moovweb project and you will be able to use Tritium to manipulate the content. Then you can point the iframe of the original page to this new content.
Use JavaScript/AJAX to modify the iframe's content.
However there are implications for production domains... I'm afraid I may have rushed this answer and will update it after I do more research.
If the iframe is on the same origin (http://m.yoursite.com) or on an origin you have in your config.json you can absolutely use tritium! However, maybe not in the way you expect!
So, the iFrame is going to make a separate request to the src attribute's location. If you ensure this request is going through the SDK (by rewriting it) like so:
$(".//iframe[#src]") {
attribute("src") {
rewrite("link")
}
}
Then you can map that url and perform your regular tritium on it!
you need to analyses the src of iframe and need to write mapping in mappings.ts for the url in src. Include proper .ts file in pages folder and start transforming it.
I am writing a web page to show image (image is dynamically generate by .Net charting) in a web. I have used the asp.net web forms URL routing to navigate to this page. Once I use the URL routing the image appear on the page. Anyway this is working fine for normal page browse.
More than likely your link to the image is using a relative path, and once you introduce routing you are working with a URL structure that appears to be deeper nested in the folder structure than it is.
When linking to the image for display I would recommend using root relative path something like /Images/MyFile.jpg rather than ../Images/MyFile.jpg, or similar.
This way if your route changes, and additional "folders" appear in the route, the link will still work.