I integrated an iframe to my angularjs app and I also can communicate with my Iframe. I used the following way:
<iframe ng-if="reloadIFrame" class="embed-responsive-item" src="/context/iframe_integration.html"
onload="angular.element(document.documentElement).injector().get('$rootScope').$broadcast('iFrameLoadedEvent', event);">
</iframe>
I catch the broadcasted event in a service and save the reference to it:
// ...
var iFrameInterface = false;
$rootScope.$on('iFrameLoadedEvent', function(ev, event) {
if(!iFrameInterface){
iFrameInterface = angular.element(event.target)[0].contentWindow.iFrameInterface;
// ...
The problem is the following: If I navigate to another position in my app and go back to the site where my iframe is integrated the iframe is reloaded and my reference to it is old. I can update the reference to my iframe interface but the question is "Is it possible to integrate the iframe once and never reload again?"
I don't want to reload the content of the iframe everytime if I navigate to another page and reload it if I come to the page again.
Thank you...
Related
I'm building a Mac app using electron and react, and I'm using a modal window to redirect my users to the google login page using the loadURL method.
This causes that the whole window is covered by the modal dialog, with no way for the user to return to the previous page unless he finishes the google login flow.
I would like to have a header on top with a back button so that the user can dismiss the modal if needed. Can I insert HTML to the BrowserWindow after it has loaded the url content? Or is there a cleaner way to achieve this?
I have an application built using angular js with angular ui router. Below is my application URL
http://localhost:8082/sample/#/test/1
On click of enter in the browser address bar, the page refresh happens in chrome,
but it doesn't work in firefox. But refresh works in firefox if there is any change in the URL. Browser refresh should work on enter even there is no change in the URL.
Anyone has solution for this?
The refresh on enter doesn't work because you use # in your url (anchors). Anchors has made to smooth scrolling page to appropriate element id on page. So, if you want it to refresh, try use pushState and urls without #.
As already stated the "#" in the url tells the browser you are using anchor to scroll to and it prevents the refreshing of the page. Thats the default implementation in every browser including chrome. Angular uses the '#' to prevent browser reloading when changing between pages.
A solution for this can be utilizing HTML5 history API which will also allow for your urls to be prettify and not include '#'. This is done by setting the $locationProvider.html5Mode(true) in your config:
angular.module('sample', [])
.config(function($locationProvider) {
//etc..
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
In Firefox (for me, at least) refreshing leads to a / character being appended to the URL, which breaks the app.
I'm embedding my angular project on an static html page.
It's my signup wizard, so I have multiple states.
I'd like to leave the iframe after the first state, and redirect the whole page to my URL.
any help ?
This is my iframe :
<iframe src="http://0.0.0.0:9000/#/account/create/infos" width="920px" height="650px"></iframe>
I am working on a angularjs website and when I Upload my site to public server
it work fine if i open this site by Chrome but in firefox only index content show to user and route change donot add template to ng-view?
there is no error or warning in console only this:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience
I found very silly bug in fire fox witch add a 'height:0px' to my view class and it make my ng-view invisible ....
I add 'height:auto !important;' style to it to show my content on ng-view .
I am working on a WPF aplication and I want to get the rendered HTML of a website that uses Angular JS technology. Here is what I've tried:
First, I create a WPF Web Browser control:
private WebBrowser webBrowser;
Then I navigate it to my target web page:
var uri = new Uri("http://my-angualrjs-site.com", UriKind.RelativeOrAbsolute);
webBrowser.Navigate(uri);
In the LoadCompleted event handler of my WebBrowser instance I cast the retrieved document to mshtml.HTMLDocument:
var doc = (mshtml.HTMLDocument) webb.Document;
And all I get is the raw HTML of the page, not the HTML processed and rendered by Angular JS from the server. Am I missing something?
I had a similar issue with not being able to get an angular page to render properly in the control.
After following Noseratios answer it was rendering and working good.
Maybe this would help you too:
C# webbrowser Ajax call
In short, you need to add features to the control to make the behavior closer to IE.
With his solution you'll be able to use code such as:
SetBrowserFeatureControlKey("FEATURE_AJAX_CONNECTIONEVENTS", fileName, 1);