I do a get request and get an object that contains a WordPress post. The data from that post i put into my view. But in the html part of that post contains an iframe that needs to be wrapped in a div (for scaling purposes).
Currently I am trying this:
ionViewDidLoad() {
let iframe = document.getElementsByTagName('iframe')[0];
let article = document.getElementsByTagName('article')[0];
console.log(iframe);
console.log(article);
}
But I can’t detect the iframe? Article returns the whole article including the iframe.
To give a little more context. I’m doing a project at a company to graduate. This company made the WordPress website for a soccerclub about a year ago. Now my job is to make an app with the api data from that website. The iframe will probably always contain a youtube video. I get the html from a WordPress post and that contains an iframe with a p around it. Every solution to make the embedded youtube video responsive uses a div around the iframe which i can’t add in the html because i get it trought the api.
But after trying for a long time I decided to just use media queries for every 50px in width.
Ok let’s ignore the security stuff for a moment, but after you get the HTML from the API you have it in a variable and can do with it whatever you want. Replacing <iframe ... </iframe> with <div><iframe ... </iframe></div> was not an option?
Yeah after i got that timeout i got that working but then since all the data from the post gets send to the view after the get request trough a variable I had no idea how to add the changes to that var later so I gave up after 4 hours.
I tried this.
let wrapper = document.createElement('div');
wrapper.className = "iframeContainer";
let iframe = document.getElementsByTagName('iframe')[0];
let iframeParent = iframe.parentNode;
let fragment = document.createDocumentFragment();
fragment.appendChild(iframe);
iframeParent.appendChild(wrapper);
wrapper.appendChild(fragment);
console.log(iframeParent);
Which puts the iframe into a div in the console.log. But like i said I had no idea how to push those changes to the view since the data in the view comes from an angular var this.post.content which includes the whole content of the WP post.
But yeah media queries are ok for now so don’t waste your time on this.
You were trying to manupulate the DOM. What I would have done is to (dirtyly) manipulate the HTML string. When you are displaying HTML from a server you don’t control, you can also mess with it on the way through
To elaborate on that: when getting data from a server, you could map that data before passing it through to your view. That would be an excellent place to manipulate that HTML. Small example (and yes it’s dirty):
getPosts() {
let request_url = this.base_url + 'posts'; // request url
return this.http.get(request_url).map(
(res: Response) => {
let response = res.json();
for (let item of response) {
this._processItem(item);
}
return response;
}
)
}
_processItem(item) {
let div = document.createElement('div');
div.innerHTML = item.content.rendered;
[].forEach.call(div.getElementsByTagName("a"), (a) => {
a.removeAttribute('href');
});
return item.content.rendered = div.innerHTML;
}
In this example we get some posts from a wordpress website, and manipulate each item when it comes in. Then in our page (where we need the data) we subscribe to getPosts() and get some manipulated objects back. (This example actually removes all href’s from raw HTML, just as an example)
Oww I didn’t know you could manipulate the HTML string, that might have been a better solution than. I’ll have to play around with it a little more in a few days.
Thanks!