I have a problem in hand in AngularJS and need some pointers.
I have a view where I want to embed an external url (e.g. http://www.w3schools.com). The embeded html page should respond to events like click and touch like a normal html page.
I have used ng-include directive to get that working.
Here is a code snippet:
<ion-content>
<div ng-include src="'http://www.w3schools.com'"</div>
</ion-content>
If I load the external html, I am getting the external webpage loaded, but all the links inside the page are broken. If I click on any link inside the loaded page, all links point to localhost now instead of the external url.
How can I fix this problem?
Thank in advance!
It sounds like you really just want to host the external site inside your view, and then you should just link it in an iframe.
<iframe src="http://www.w3schools.com"></iframe>
If you want something magic/dynamic stuff to happen, you will need to parse the content and rewrite the urls, attach handlers etc. The reason your ng-include does not work like expected is because it only reads the content of that url and embeds it into your view "as-if" it was just a template you made (including angular markup) and wanted to host externally for some reason.
Related
I'm making a script to preview email templates so I'm getting a full HTML page (with ) and I'm willing to make a popup with this page.
I'm getting the result from an API that gave me the full code inside a variable.
How to display this page inside my app without surcharging the styles ?
Thank you
Ps: I can't use an iframe since I can't get the preview from a simple get query (without header)
You can try one of these options (all of them have drawbacks)
ng-bind-html (AngualrJS directive) - doesn't provide styles encapsulation
iFrame - provides styles encapsulation, browser compatibility is not a problem. Still, you may need to set up or adjust your CSP policies if you are worried about security or have it already in place.
Shadow DOM - provides styles encapsulation, but you need to make sure it fits your supported browsers, and it's quite tricky to implement for AngularJS
UPD: based on your recent update, I guess you can proceed with ng-bind-html directive (HTML content will be sanitized, but you will have to cope with styles intersection and head & body tags warnings). If it doesn't work - try iFrame based on the approach referenced above (you don't need to make any external queries/requests for that).
iframe is the tag which you can use for call other html pages into your web page
<iframe src="http://www.page.com" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
I've a website called VoteCircle (www.votecircle.com), but i noted that it doesn't display well for Google Bot/Optimizely (used for A/B tests). It shows only the content that AREN'T in ng-view. All content in ng-view isn't displayed.
it was made in AngularJS and the content in ng-view isn't displayed for those bots/previews that i mentioned.
What's the best way to fix that?
Please, see attached screenshot.
Thanks.
There is a pretty easy fix for this. In your URL bar, click on the small key and enable mixed content. The browser blocks loading mixed content in the editor by default (HTTPS and HTTP resources combined). By enabling it you can load the rest of the page in the editor.
I am currently working on a website and during the loading of the entire page, the page is "jumping" so that I would like to know how I can create an entire ,let's say black screen, where something is displayed during the time the page loads.
That seems quite easy but I was wondering because I have separate files for the header, the footer and the content on how to coordinate all of them, and still have a nice code.
I am working with angularJS. I read a lot about : $viewContentLoaded and also tried ng-cloak, but if any of you has an awesome solution to keep simple, it would be great :)
Thanks
I would say that one approach you can take is use some sort of templating engine for your HTML files (like Jade for example). In this way, you can keep all the code nicely separated in multiple files and using a task runner like Gulp or Grunt you can compile your HTML files before serving the page.
The important difference here is the fact that you won't have to load all the page parts (header, footer and so on) using AJAX requests. Instead, they will already be rendered in your HTML page allowing you to create a nice loader using ng-cloak on your content part.
I am editing an app developed using MEAN framework. I have footer.html from views, and I have just put a link like:
<li>Privacy Policy</li>
Then I have created a html page inside views folder, named privacy.html.
When I click on the footer it does show up. It works well with the other link and page there, which is FAQ. What I am doing it wrong? Is there anything else I need to code or use controller to get the new page shown.
I'm trying to scrape data from a webpage and firebug shows the data I want to extract but it's not shown in the source code when I right click "show source code".
Is this because firebug shows the dynamic content which gets loaded by javascript etc?
Is phantomjs and casperjs the best way of extracting the contents of this page, including all the div elements. I need to extract the data shown by firebug.
Does casper js have a casper.GrabHTML method, like mechanize and beautifulsoup? which will get all of the dom elements, like clsses, hrefs , links, buttons, text etc
This is the order in which stuff happens:
PHP generates HTML
Browser loads HTML
JavaScript manipulate loaded HTML
Why is this?
The view source browser feature normally shows the plain HTML as received by the browser. Other advanced tools like Firefug are able to display the current HTML after being changed by JavaScript. (Firefox itself has this feature as well: just right click on some generated HTML and choose "View selected source".)
How can I access the full (firebug html)?
I'm not sure about the HTML tab but the Network tab always displays documents as received from the server.
Can I do it in php/javascript?
PHP is no longer running when the original HTML reaches the browser.
JavaScript can display HTML with the .innerHTML property of any DOM node.