0

I'm working on an Angular app. I have an iFrame and sets its innerHTML which contains relative links, so I decided to append base tag in the head tag of my iFrame, the code I wrote in the script/controller is as follow:

$scope.content = $scope.selectedSitePage.html.value; 
var baseTag = document.createElement('base');
var prependURL = "http://232.17.43.22/sharepoint.xyz.net/";
baseTag.href = prependURL ;
$('#frameContent').contents().find('head').append(baseTag);

In HTML:

<iframe id="frameContent" frame-content="content"></iframe>

frameContent is a directive I made:

.directive('frameContent', function () {
return { scope: { "content":"=content" },
link: function link(scope, element) { 
element.get(0).contentWindow.document.body.innerHTML = scope.content; } } 
});

The ISSUE: is that, if I have a relative URL in img src '/_layout/abc.png', it doesn't appear because the request goes as 'http://232.17.43.22/_layout/abc.png' but it has to be 'http://232.17.43.22/sharepoint.xyz.net/_layout/abc.png'

So my QUESTION, how can I avoid the slicing of the base href after the first slash?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Basim Hennawi
  • 2,651
  • 3
  • 19
  • 31
  • How is iframe being populated .. all by script? Or does it have an `src`? – charlietfl Oct 11 '15 at 15:19
  • It's an Angular app so I'm using directive called frame-content set the inner HTML This is the directive I made: .directive('frameContent', function () { return { scope: { "content": "=content" }, link: function link(scope, element) { element.get(0).contentWindow.document.body.innerHTML = scope.content; } } }); And this is how the code in controller looks like: $scope.content = $scope.selectedSitePage.html.value; – Basim Hennawi Oct 11 '15 at 15:28
  • update question itself with that code so it can be formatted and read by all – charlietfl Oct 11 '15 at 15:30
  • I would suggest you either modify the html before passing to `$scope.content`. Easy to do with jQuery. Loop over all `src` and `href` and adjust. Or modify directive to set base before adding content – charlietfl Oct 11 '15 at 15:33
  • @charliefl I've already updated it! I'm gonna try looping over s and s and trim the initial forward slash. Thanks. – Basim Hennawi Oct 11 '15 at 15:46
  • already did what? Solved problem? – charlietfl Oct 11 '15 at 15:48

1 Answers1

1

Drop the initial forward slash in your relative path will do the trick

<img src='_layout/abc.png' alt='an image text' />

Read more: Starting with a forward slash in html for "href"

Simple sample using a link/href though works the same.

If you hover the links and check the url address, you'll see the difference.

<html>
 <head>
  <base href='http://232.17.43.22/sharepoint.xyz.net/' />
 </head>
<body>
  
<a href='_layout/abc.png'>Relative path with no "/"</a><br /><br />
  
<a href='/_layout/abc.png'>Absolute path with "/"</a>
  
</body>  
</html>
Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • I'm gonna try looping over s and s and trim the initial forward slash. Thanks. – Basim Hennawi Oct 11 '15 at 15:48
  • I did it and still prepend just the first part before the slash. The alternate solution to loop over the html before binding but I'm asking here to solve it using base tag. Thanks anyway! – Basim Hennawi Oct 11 '15 at 16:07
  • As a respond to what you're asking, you can't solve the initial `/` using base tag, because the initial `/` works like an absolute path (you can read more in the link I posted in my answer). – Asons Oct 11 '15 at 18:45
  • @BasimHennawi Updated my answer to show how it works. – Asons Oct 11 '15 at 19:03